mp4格式-播放和断点续播
生活随笔
收集整理的這篇文章主要介紹了
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
總結
以上是生活随笔為你收集整理的mp4格式-播放和断点续播的全部內容,希望文章能夠幫你解決所遇到的問題。
- 上一篇: 百变鹏仔缤纷彩色文字广告位代码美化版
- 下一篇: 前后端分离的项目部署到tomcat_阿里