在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", "#");
            }

        })
原文地址:https://www.cnblogs.com/sas1231/p/9963936.html