html5 video标签,html5中video的属性方法

　　video标签

　　浏览器的视频标签通常会收到一个src属性，然后浏览器会根据这个src属性自动加载视频。

　　这个过程是浏览器加载视频。

　　这种方式有什么不好？

　　Mp4文件不能流化。兼容webm、flv、hls等格式。播放器的ui太丑，一些常用功能没有清晰切换。有些操作比如重新加载视频很慢，视频黑屏无法加密。请求video流视频

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

　　设xhr=新窗口。XMLHttpRequest()；xhr . response type= array buffer xhr . open( get ， http://www . w3 school . com . cn/I/movie . MP4 )xhr . response type= array buffer ；//xhr.setRequestHeader(Range ，` bytes=0-390625 `)xhr . onload=function(){ if(xhr . status===200 xhr . status===206){ console . log(xhr . response)} } xhr . send()；或者fetch的arrayBuffer方法返回视频流。

　　获取(视频Url)。then(function(response){ return response . array buffer()；})得到的数据是什么？二进制视频流。

　　这有什么用？

　　video去播“流”

　　MediaSource

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

　　使用

　　我们通过URL.createObjectURL创建一个blob格式的视频文件来标记视频。

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

　　div class=a video id=video 控件preload= auto /video/div script $(function(){ var video=document . query selector( # video )；var mediaSource=new mediaSource()；video . src=URL . createobjecturl(media source)；media source . addevent listener( source open ，source open)；函数source open(e){ URL . revokeobjecturl(video . src)；//设置媒体的编码类型var mime= video/webm；编解码器=vorbis，vp8 ；var mediaSource=e.targetvar source buffer=media source . addsourcebuffer(mime)；var video URL= http://localhost:9090/examples/MP4/video . webm ；获取(视频Url)。然后(function(response){ console . log(response)return response . array buffer()；}) .然后(function(array buffer){ source buffer . addevent listener( update end ，function(e) { if(！source buffer . updating media source . ready state=== open ){ media source . endo fstream()；//数据请求完成后，我们需要调用endOfStream()。它将MediaSource.readyState更改为ended并触发sourceended事件。video.play()。然后(function() {})。catch(function(err){ console . log(err)})；} });source buffer . append buffer(array buffer)；});} })/脚本我们的矿是什么？

　　Video/webm是一种视频格式，编解码器之后的第一段是视频编解码的一些重要信息，比如编码模式、分辨率、帧率、比特率以及对解码器解码能力的要求。

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

　　生成这样的视频标签。现在我们绕过浏览器直接请求src，ajax请求视频流，然后我们就可以处理视频流，直接操作视频流，实现我们需要的各种功能。

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

　　播放器

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

　　播放器原理

　　它利用的是流式视频源，不只是简单的请求流然后给视频标签播放，而是请求视频流然后用js解码，然后执行一些必要的操作然后给视频播放。

　　为什么要用js解码呢？

　　公司大部分视频都是mp4。mp4如何支持流媒体？我们取mp4流，js解析它的视频信息，然后js把它转换成支持视频流的fmp4格式的文件。

　　其优点是

　　解决了chrome不支持hls格式的问题(也有各种不支持格式的问题)。因为我们是直接操作二进制视频数据，所以不存在视频标签不支持的情况。解决了切换清晰度和刷新视频的问题。mp4文件快进操作被最小化，并且支持流式加载。我们支持由我们直接操作的直播和弹幕视频流，所以在切换视频的清晰度或者快进的时候，我们会计算当前的时间流，然后用js加载视频的新流，从而做出最快的加载和响应。

　　这就是这篇关于用视频标签实现html5流的文章。更多带视频标签的相关html5流，请搜索以前的文章或继续浏览下面的相关文章。希望你以后能支持我！

郑重声明：本文由网友发布，不代表盛行IT的观点，版权归原作者所有，仅为传播更多信息之目的，如有侵权请联系，我们将第一时间修改或删除，多谢。