html5用video标签流式加载的实现_html5教程技巧

来源:脚本之家  责任编辑:小易  

new个video,指定播放列表的第一个视频路径为src。监听end事件,回调里面把video的src改成列表的下一个,再play代码示例:12345678910111213141516var vList=['视频地址url1','url2','.'];初始化播放列表var vLen=vList.length;播放列表的长度 var curr=0;当前播放的视频var video=new Video();video.addEventListener('end',play);play();function play(e){ video.src=vList[curr];video.load();如果短的话,可以加载完成之后再播放,监听 canplaythrough 事件即可 video.play();curr+;if(curr>=vLen)curr=0;播放完了,重新播放 }可以实现html5 播放多个视频。一个接一个的播放www.zgxue.com防采集请勿采集本网。

video标签

new个video,指定播放列表的第一个视频路径为src。监听end事件,回调里面把video的src改成列表的下一个,再play 代码示例: var vList = ['视频地址url1', 'url2', '']; // 初始化播放列表 var vLen = vList.length; // 播放列表的长度 var c

浏览器的video标签通常是接收一个src属性,然后浏览器就会根据这个src属性来自动加载视频。

《video id="myvideo" src="xx.mp4"》《/video》 myvideo.onended = function(){ this.src= "yy.mp4"; } audio和video对象有个事件,叫 ended。它负责监听音视频播放完毕事件。可以在这个事件中更改audio和video的src属性,达到播放下一个的效果

这个过程是浏览器来加载video的。

在js中使用document.getElementById("video")获取视频元素,加监听addEventListener("ended", function () { //要执行的函数内容 }); 最近几周都在弄这个

这种方式有什么问题吗? mp4文件不能流式加载 webm,flv,hls等格式兼容性问题 播放器ui太丑,一些常用的功能都没有 清晰度切换,等一些操作需要重载视频,比较慢而且还会黑屏 无法对视频加密

1、新建一个html文件,命名为test.html,用于介绍如何使用video控制视频。 2、在test.html页面,使用button标签创建四个按钮,分别是播放/暂停、大、中、小,用于控制视频的播放效果。同时,使用video标签创建一个视频。 3、给每个按钮绑定oncli

请求video流视频

利用js,给div的innerhtml添加video代码 或者也可结合prepend实现

我们可以通过设置responseType为arraybuffer来获取视频流,也可以通过range字段来获取视频流片段。比如

let xhr = new window.XMLHttpRequest();xhr.responseType = 'arraybuffer'xhr.open('get', 'http://www.w3school.com.cn/i/movie.mp4')xhr.responseType = 'arraybuffer';// xhr.setRequestHeader('Range', `bytes=0-390625`)xhr.onload = function () { if (xhr.status === 200 || xhr.status === 206) { console.log(xhr.response) }}xhr.send();

或者fetch的arrayBuffer方法返回视频流。

fetch(videoUrl).then(function(response) { return response.arrayBuffer(); })

获取到的数据是什么呢?二进制的视频流。

获取这个有什么用呢?

video去播“流”

MediaSource

MediaSource简称mse,是h5的一个api,它允许通过js生成媒体流,让浏览器播放。

使用

我们通过 URL.createObjectURL来创建一个blob格式的视频文件,来给video标签播。

具体用法就是new MediaSource,然后根据这个MediaSource生成blob文件,然后向MediaSource中添加mime和视频流。

<div class="a"> <video id="video" controls preload="auto"></video> </div> <script> $(function() { var video = document.querySelector('#video'); var mediaSource = new MediaSource(); video.src = URL.createObjectURL(mediaSource); mediaSource.addEventListener('sourceopen', sourceOpen); function sourceOpen(e) { URL.revokeObjectURL(video.src); // 设置 媒体的编码类型 var mime = 'video/webm; codecs="vorbis,vp8"'; var mediaSource = e.target; var sourceBuffer = mediaSource.addSourceBuffer(mime); var videoUrl = 'http://localhost:9090/examples/mp4/video.webm'; fetch(videoUrl).then(function(response) { console.log(response) return response.arrayBuffer(); }) .then(function(arrayBuffer) { sourceBuffer.addEventListener('updateend', function(e) { if (!sourceBuffer.updating && mediaSource.readyState === 'open') { mediaSource.endOfStream(); // 在数据请求完成后,我们需要调用 endOfStream()。它会改变 MediaSource.readyState 为 ended 并且触发 sourceended 事件。 video.play().then(function() {}).catch(function(err) { console.log(err) }); } }); sourceBuffer.appendBuffer(arrayBuffer); }); } })</script>

我们的mine是什么呢?

video/webm是视频格式,codecs后面第一段是一些视频编解码的一些重要信息,诸如编码方式、分辨率、帧率、码率以及对解码器解码能力的要求。

第二段是关于音频部分的信息。

 

生成这样的一个video标签。我们现在绕过了浏览器直接去请求src这一步,ajax请求视频流,然后我们可以对视频流进行处理,直接操作视频流实现我们需要的各种功能。

但是对于mp4格式,是不支持流式加载的,所以只能通过我们自己操作流来实现流式播放。

播放器

公司同事研发了一款开源播放器,https://github.com/bytedance/xgplayer ,西瓜视频好几千万dau的产品实测。

播放器原理

它是利用了流式处理视频源,不仅仅是简单的请求流然后交给video标签播放,它是请求视频流然后用js解码然后进行一些需要的操作,交给video播放。

为什么要用js解码呢?

公司大部分视频是mp4,怎么让mp4支持流播放呢?我们把mp4的流拿过来,js解析出它的视频信息,然后js转换成支持视频流的fmp4格式的文件。

它的优势是

    解决了chrome不支持hls格式的问题(还有各种不支持格式的问题),因为我们是直接操作二进制视频数据,所以不存在video标签不支持的情况。 解决了切换清晰度重新刷新视频的问题 对于mp4文件快进操作进行最小化的请求加载,让它支持流式加载。 支持直播和弹幕

我们直接操作的视频流,所以在对视频进行清晰度切换,或者快进的时候,我们后计算当前时间的流,然后用js加载视频的新的流,从而进行最快的加载和响应。

到此这篇关于html5用video标签流式加载的实现的文章就介绍到这了,更多相关html5用video标签流式加载内容请搜索真格学网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持真格学网!

html5media怎么识别动态加载进来的video标签在js中使用document.getElementById("video")获取视频元素,加监听addEventListener("ended",function(){要执行的函数内容});内容来自www.zgxue.com请勿采集。


  • 本文相关:
  • video.js支持m3u8格式直播的实现示例
  • video实现有声音自动播放的实现方法
  • html5 video标签视频的最佳实践
  • html5自定义video标签的海报与播放按钮功能
  • html5视频媒体标签video的使用方法及完整参数说明详解
  • 详解html5中video标签那些属性和方法
  • html5视频播放插件 video.js介绍
  • video结合canvas实现视频在线截图功能
  • html页面原生video标签隐藏下载按钮功能
  • html5 video视频字幕的使用和制作方法
  • html5media怎么识别动态加载进来的video标签
  • 怎样实现 html5 多个视频在同一个<video>标签上播放?
  • 使用html5 video播放的视频加载很慢怎么优化
  • 使用html5的video标签打开视频加载慢怎么优化
  • 使用html5 video播放的视频加载很慢怎么优化?
  • HTML5中video标签如何在播放结束后执行语句
  • html5 video标签如何在可以在视频完全加载进浏览器...
  • HTML5中 使用video标签 播放本地视频
  • 如何动态添加html5中video标签属性
  • 网页设计中html5的video 标签如何写才能使得视频文...
  • 网站首页网页制作脚本下载服务器操作系统网站运营平面设计媒体动画电脑基础硬件教程网络安全主页网页制作html5videohtml5自定义video标签的海报与播放按钮功能html5视频媒体标签video的使用方法及完整参数说明详解详解html5中video标签那些属性和方法html页面原生video标签隐藏下载按钮功能html5 video视频字幕的使用和制作方法html/xhtmlhtml5cssxml/xsltdreamweaver教程frontpage教程心得技巧css 如何让背景图片拉伸填充避免重复显示html5 input placeholder 颜色修改示例基于第一个phonegap(cordova)的应用详解 html5配合css3实现带提示文字的输入框(摆脱js)html5定位获取当前位置并在百度地图上显示将html5 canvas的内容保存为图片借助todataurl实现html5中如何显示视频呢 html5视频播放demo让ie支持html5的方法微信浏览器取消缓存的方法html5的存储方式sessionstorage和localstorage详解video.js支持m3u8格式直播的实现示例video实现有声音自动播放的实现方法基于html5 canvas做批改作业的小插件video下autoplay属性无效的解决方法(添加muted属性)html2canvas生成的图片偏移不完整的解决方法html5简介及新增功能介绍html5让容器充满屏幕高度或自适应剩余高度的布局实现html5在手机端调用相机的方法实现html5页面获取微信公众号的openid的方法钉钉企业内部h5微应用开发详解
    免责声明 - 关于我们 - 联系我们 - 广告联系 - 友情链接 - 帮助中心 - 频道导航
    Copyright © 2017 www.zgxue.com All Rights Reserved