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

提示：扫一扫查出行
【扫一扫了解最新限行尾号】
复制提示

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

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

示例一:

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

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 ;
}

示例二:

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

然后重写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", "#");
} })