在MUI框架中使用video.js插件，并在暂停的时候利用Asp.net将观看时长保存到sqlserver数据库

本次保存数据的情况有三种：

1. 在视频播放的时候点击暂停，将本视频的进度保存到数据库
2. 利用mui内部的控件，返回上一页操作时，进行保存
3. 安卓手机触发返回键的时候，进行保存

示例一:

　　在video标签上面添加暂停(onpause)事件

 <video id="example_video_1" class="video-js vjs-default-skin vjs-big-play-centered" controls preload="none" width="640" height="264" poster="http://vjs.zencdn.net/v/oceans.png" data-setup='{ "aspectRatio":"640:267", "playbackRates": [1, 1.5, 2] }' onpause="current_time(this);">
        <source src="..files/oceans.mp4" type="video/mp4">
    </video>    

　js添加监听事件，video的currentTime属性可以获取当前视频的观看时间

 //监听暂停事件
        function current_time(video) {
　　　　　　　　//获取当前video的id
            var id = video.id;
            var timeDisplay;
            //用秒数来显示当前播放进度
            timeDisplay = Math.floor(video.currentTime);
　　　　　　　//利用ajax将该video的id和视频已观看时长传递到后台控制器
            $.ajax({
                type: 'post',
                data: "{id:'" + id + "',videoHasTime:'" + timeDisplay + "'}",
                url: '../PlayVideo/SaveCurrentTime',
                dataType: 'json',
                contentType: 'application/json;charset=utf-8',
                success: function (data) {
                }
            });
        }

后台数据库存储

　//id:编号
　//视频时长
 public int SaveCurrentTime(string id,int videoHasTime)
        {
　　　　　　　//经过调试，发现video的id都会在后面加上_html5_api后缀，所以在这里将后缀去除
            string guid = id.Replace("_html5_api", "");
　　　　　　　//利用传递过来的id，查找到对应的数据，将它的视频播放时长进行更改
            videoSave vs = db.videoSave.Find(guid);
            vs.videoHasTime = videoHasTime;
            db.Entry(vs).State = EntityState.Modified;
            db.SaveChanges();
            return 1;
        }

示例二:

　　　　

 

　　  mui的返回事件的触发，必须在class里面添加mui-action-back，例:

　　

 <header class="mui-bar mui-bar-nav">
        <a class="mui-action-back mui-icon mui-icon-left-nav mui-pull-left"></a>
        <h1 class="mui-title">视频</h1>
    </header>

　　然后重写back函数，在点击返回上一页按钮时，弹出提示框，点击确定会将当前页面中所有的的video的观看时间存储到数据库，后台处理程序和上面的一致

mui.back = function(){
            mui.confirm("确定要退出吗？", "提示", btnArray, function (e) {
                if (e.index == 0) {
　　　　　　　　　　　　//获取页面中所有的video
                    var video = document.getElementsByClassName("videos");
                    for (var i = 0; i < video.length; i++) {
                        var id = video[i].id;
                        var timeDisplay;
                        //用秒数来显示当前播放进度
                        timeDisplay = Math.floor(video[i].currentTime);
                        $.ajax({
                            type: 'post',
                            data: "{id:'" + id + "',videoHasTime:'" + timeDisplay + "'}",
                            url: '../PlayVideo/SaveCurrentTime',
                            dataType: 'json',
                            contentType: 'application/json;charset=utf-8',
                            success: function (data) {
                                if (data == 1) {
                                    mui.alert("视频进度保存成功");
                                    window.location = "Test";
                                }
                            }
                        });
                    }
                }
            });
        }

示例三:

　　安卓手机的返回键的监听事件，在页面初始化的时候，必须先添加一个历史记录（后台处理程序和示例一一致）

　　

 //添加历史记录
            pushHistory();
            //安卓手机返回键事件
            window.addEventListener("popstate", function (e) {
                mui.confirm("确定要退出吗？", "提示", btnArray, function (e) {
                    if (e.index == 0) {
                        var video = document.getElementsByClassName("videos");

                        for (var i = 0; i < video.length; i++) {
                            var id = video[i].id;
                            var timeDisplay;
                            //用秒数来显示当前播放进度
                            timeDisplay = Math.floor(video[i].currentTime);
                            $.ajax({
                                type: 'post',
                                data: "{id:'" + id + "',videoHasTime:'" + timeDisplay + "'}",
                                url: '../PlayVideo/SaveCurrentTime',
                                dataType: 'json',
                                contentType: 'application/json;charset=utf-8',
                                success: function (data) {
                                    if (data == 1) {
                                        window.location = "Test";
                                    }
                                }
                            });
                        }
                    }
                    else {
                        //再次添加历史记录，否则确认框只能弹出一次（第一次点击返回键之后，如果取消，下一次点击返回键，就不弹出确认框）
                        pushHistory();
                    }
                });

            }, false)
            //添加历史记录
            function pushHistory() {
                var state = {
                    title: "title",
                    url: "#"
                };
                window.history.pushState(state, "title", "#");
            }

        })