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) { } }); }
【推荐】编程新体验,更懂你的AI,立即体验豆包MarsCode编程助手
【推荐】凌霞软件回馈社区,博客园 & 1Panel & Halo 联合会员上线
【推荐】抖音旗下AI助手豆包,你的智能百科全书,全免费不限次数
【推荐】轻量又高性能的 SSH 工具 IShell:AI 加持,快人一步
· .NET Core GC压缩(compact_phase)底层原理浅谈
· 现代计算机视觉入门之:什么是图片特征编码
· .NET 9 new features-C#13新的锁类型和语义
· Linux系统下SQL Server数据库镜像配置全流程详解
· 现代计算机视觉入门之:什么是视频
· 【译】我们最喜欢的2024年的 Visual Studio 新功能
· 个人数据保全计划:从印象笔记迁移到joplin
· Vue3.5常用特性整理
· 重拾 SSH:从基础到安全加固
· 为什么UNIX使用init进程启动其他进程?