mp4格式-播放和断点续播

 video 标签(autopaly自动播放属性)

   <video id="videoPlay" class="video" autoplay="autoplay" poster="" width="1200" height="100%" style="text-align: -webkit-center; margin: 0 auto;" controls="" preload="">
                        <source src="video/mp4/环保小视频.mp4" type="video/mp4">
                    </video>
var time;
var xutime;
var CurrentTime;
var RemainingTime;

var video = document.getElementById('videoPlay');

//播放结束事件
video.onended = function () {
    console.log("视频播放完成");
    clearInterval(time);
    clearInterval(xutime);
};

//播放开始事件
video.oncanplay = function () {
    console.log("视频播放开始");
    //播放总时长
    RemainingTime = video.duration.toFixed(0);
    console.log(RemainingTime);
    //是否可以续播
    var TimeInt = TimeIntervalSelect();
    //可以
    if (TimeInt > 0) {
        //播放进度加1秒后小于总时长,进入续播
        if (parseFloat(TimeInt) + 1 < parseFloat(RemainingTime)) {
            if (pd == 0) {
                console.log(TimeInt);
                ContinuedBroadcasting(TimeInt);
                pd = 1;
            }
        } //不可以,插入播放进度
        else {
            TimeInterval();
        }
    }
        //不可以,插入播放进度
    else {
        TimeInterval();
    }
}
//断点续播(秒) function ContinuedBroadcasting(Second) { //断点续播播放进度推后一秒 $('video').prop('currentTime', parseFloat(Second) - 1);
   //播放 $(
'video').trigger('play'); xutime = setInterval(function () { CurrentTime = video.currentTime.toFixed(1); //播放进度(单位:秒) console.log("续播进度:" + CurrentTime); InsetTimeInterval(CurrentTime); }, 1000); } //记录播放进度 function TimeInterval() { if (parseFloat(CurrentTime) > parseFloat(RemainingTime)) { clearInterval(time); } //轮询插入当前播放进度 time = setInterval(function () { CurrentTime = video.currentTime.toFixed(1); //当前播放进度(单位:秒) console.log("当前进度:" + CurrentTime); InsetTimeInterval(CurrentTime); }, 1000); } var id = 0; var pd = 0; $("video").click(function () { if (id == 0) { //播放暂停 $('video').trigger('pause'); id = 1; clearInterval(time); clearInterval(xutime); } else { //播放继续 $('video').trigger('play'); id = 0; TimeInterval(); } }) //获取进度 function TimeIntervalSelect() { var Progress; $.ajax({ url: "/Video/TimeSelect", type: 'GET', async: false, dataType: 'json', success: function (data) { Progress = data; } }); return Progress; } //插入进度 function InsetTimeInterval(CurrentTime) { $.ajax({ url: "/Video/Time", data: {CurrentTime: CurrentTime }, type: 'POST', async: false, dataType: 'json', success: function (data) { } }); }
原文地址:https://www.cnblogs.com/-Fly/p/7525591.html