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格式-播放和断点续播相关推荐

  1. 应对突发事件PPStream断点续播

    如果遇到断网停电等突发事件时不得不中断视频观看,令人烦恼的是,下次再度欣赏该节目时, 要么是重新开始看,要么是拖动进度条至上次中断的地方.好在PPStream为我们提供了断点续播功能, 使我们能重新启 ...

  2. vue+腾讯云api实现直播/续播

    项目背景 用户在移动H5端能观看客户直播端推送的直播视频,以及服务器上的点播视频(可重复观看的视频).实现方案是借助腾讯云灵活的接口,快速与其自有 Web 应用集成,来实现视频播放功能(前端实现部分很 ...

  3. 支持 M3U8 格式播放的方法

    当前知识付费使用阿里云 web 播放器作为视频播放器.阿里云 web 播放器本身支持 MP4 和 M3U8 格式播放,由于知识付费底层引入 RequireJS,导致阿里云 web 播放器 Hls 扩展 ...

  4. html5视频播放器代码实例(含倍速、清晰度切换、续播)

    本文将对视频播放相关的功能进行说明(基于云平台),包括初始化播放器.播放器尺寸设置.视频切换.倍速切换.视频预览.自定义视频播放的开始/结束时间.禁止拖拽进度.播放器皮肤.控件按钮以及播放控制等.   ...

  5. 让知识付费系统视频支持M3U8格式播放的方法

    当前知识付费使用阿里云 web 播放器作为视频播放器.阿里云 web 播放器本身支持 MP4 和 M3U8 格式播放,由于知识付费底层引入 RequireJS,导致阿里云 web 播放器 Hls 扩展 ...

  6. 优酷1080p的独播视频kux怎么转换成mp4格式

    经常在优酷看视频的网友们应该都知道,优酷视频下载的文件格式为kux格式,就好像腾讯视频的qlv格式.爱奇艺的qsv格式,是通过特殊加密的文件.优酷客户端支持有些视频的标清.高清画质下载后转码为mp4格 ...

  7. DASH、HLS和MP4格式有什么播放体验区别?

    DASH.HLS和MP4格式有什么播放体验区别? 更新时间:2022-06-20 GMT+08:00 查看PDF 分享 视频点播支持视频转码的输出格式主要有DASH.HLS和MP4,这三种的播放体验如 ...

  8. 关于在asp.net中播放MP4格式的视频(好吧,只兼容支持html5的浏览器,ie8及以下的都歇菜了)...

    项目要求只能播放MP4格式的视频,同事的播放器在我这里不完全管用,对于部分mp4格式的视频编码不支持,所以各种在网上找,在http://www.iteye.com/problems/75503问答的一 ...

  9. 海康威视监控下载下来的mp4格式的视频,小类别MPEG-PS格式,这种格式在浏览器中没法播放,跪求播放方法。

    海康下载视频格式:用mediainfo查看 普通mp4格式用mediainfo查看 自己试了很多方法,html5的 Video控件没法播放,ckplayer没法播放. 作者已经解决这个问题,下面是自动 ...

  10. 怎么将webm文件转换成MP4格式在手机上播放

    由于各品牌不同型号的手机配置不同,手机支持的视频格式也可能不同.比较常见的就是视频格式转换,即将手机不支持播放的格式视频转换成手机支持的格式视频.手机最常用的格式是MP4.3GP.3G2等格式,所以我 ...

最新文章

  1. 优达学城《DeepLearning》2-5:风格迁移
  2. Residual Networks
  3. vim切换编程语言_把 Vim 打造成源代码编辑器 - C 语言编程透视
  4. 学python是看书还是看视频-Python与豆瓣读书
  5. 验证视图状态MAC失败问题正确的解决办法
  6. 【转】Step By Step在VS2008中完整配置Ajax Toolkit的使用(配图)
  7. Markdown 工程师也不简单:如何写一个高逼格 README
  8. 2019 WAIC | 腾讯张正友:人工智能的热与酷
  9. ###《Effective STL》--Chapter2
  10. java中的Static、final、Static final各种用法
  11. 企业级数据库备份方案完全攻略
  12. android双缓冲绘图技术分析
  13. Adobe CS3 Design Premium 2DVD完全版(原盘镜像)
  14. sql 查询结果随机排序
  15. 索尼计算机bios正确设置,索尼vaio笔记本如何进入bios设置_索尼笔记本进入bios图解...
  16. Https Tomcat CSR生成 以及相关操作
  17. 使用 hugo 快速开发博客网页
  18. EXCEL基础视频-制作表格的小技巧
  19. C语言的快乐-表白代码
  20. mimikatz免杀过360和火绒

热门文章

  1. word两种html区别,word文本框有哪两种方式?
  2. cef 获取 html代码,CefGlue获取网页源代码
  3. 《开源安全运维平台--OSSIM最佳实践》节日期间当当自营店 五折 优惠活动开始啦!...
  4. 电脑是linux下安装win7,Linux下安装win7
  5. win7配置计算机失败怎么办,Win7配置失败还原更新怎么回事 Win7配置update失败的解决办法...
  6. 电影文件的合并与分割
  7. 【阅读笔记】联邦学习实战——用FATE从零实现横向逻辑回归
  8. 【转载】Android系统裁剪方法
  9. 实战 Mantle 解析界面app 科技频道
  10. python里面snip什么意思_文献检索里面SJR是什么,SNIP指标是什么