Html5 video,不支持html5 video

　　本文介绍html5视频移动终端填坑注意事项，分享给大家，如下：

　　video id= video style= object-fit:fill autoplay WebKit-playsinline playsinline X5-video-player-type= H5 X5-video-player-full screen= true X5-video-orientation= port raint src= video . MP4 //video！-object-fit:fill video content fill整个视频容器poster: img . jpg video cover autoplay:autoplay-加载页面时加载整个视频meta加载页面时仅加载元数据none加载页面时不加载视频静音：设置此属性时，它规定视频的音频输出应该静音WebKit-plays inline play inline:inline play X5-video-player-type= h5 :enable X5内核H5播放器X5-video-player-full screen= true 全屏设置真与假的设定会导致不同的布局。X5-video-orientation= portrain :声明播放器支持的方向。可选值为landscape landscape和portrain。默认值portraint。无论是直播还是全屏H5通常都是竖着玩的，但是这个属性需要x5-video-player-type开启H5模式-自动播放。

　　设置autoplay属性

　　视频自动播放/视频移动浏览器中

　　但在很多手机浏览器中，需要用户的真实操作(touchend、click、doubleclick或keydown事件等标准事件)来触发video.play()的调用，才能自动播放音视频。

　　dom.addEventListener(click ，function(){ video . play()})微信中

　　也可以在wx.ready()中触发video.play()

　　wx.ready(函数(){ video.play()})内联播放

　　设置属性webkit-playsinline playsinline

　　Video id= Video WebKit-plays online plays online//Video在iOS Safari和部分Android浏览器中播放视频时，无法播放h5页面中的视频，系统会自动接管视频。

　　如果需要播放h5页面中的视频，需要在视频标签中添加webkit-playsinline。iOS10之后需要加入playsinline。建议同时添加这两个属性。同时要求app支持这种模式。

　　webview . allowsinlinemediaplayback=YES；ios Q和微信都支持这种模式，但是安卓微信挂机。

　　android 微信

　　Android内置浏览器使用腾讯X5内核，不遵循X5web标准。视频强制全屏就是其中之一。视频播放后还会出现QQ自带的视频推荐。

　　据说它有白名单，白名单下的视频资源不会全屏。但是腾讯不能再加白名单了。尿，无解。

　　目前还有一种解决方案，就是用h5 canvas播放视频。

　　canvas 播放视频

　　使用canvas时遇到的坑：视频必须添加x5-video-player-type=h5 属性，否则会卡在移动端无法播放视频。个人认为是视频被接管造成的。

　　div class= wrapper video id= video style= display:none autoplay src= video . MP4 X5-video-player-type= H5 /video canvas id= canvas /canvas/div script var video=document . query selector( # video )var canvas=document . query selector( # canvas )var wrapper=canvas . parent node var width=wrapper . offsetwidth var height=wrapper . offset height var CTX=c . get context( 2d )var time=null canvas . wid}, 20);}，假)；video.addEventListener(pause ，function(){ window . clear interval(time)；}，假)；video.addEventListener(ended ，function(){ window . clear interval(time)；}，假)；/script最后发现，虽然视频是用canvas播放的，但是安卓微信可以在全屏视频播放后屏蔽推荐视频。但是视频播放时的全屏问题是没有办法阻止的。或者是万恶的白名单。吐槽。。

　　更何况没有办法触发js退出全屏。

　　ios黑屏问题

　　ios播放视频时，会出现短暂的黑屏，之后会正常显示。

　　解决方法：

　　在视频顶部覆盖一个div，并填充一张图片，以创建播放前加载的假象。然后监听事件timeupdate，在视频中有画面的时候去掉这个“div块”。

　　video . addevent listener( time update ，function(){ if(video . current time 0.1){ posterimg . hidden()；}})Media 方法和属性

　　HTMLVideoElement和HTMLAudioElement都继承自HTMLMediaElement。

　　//媒体错误Media obj . error；//null:normal media obj . error . code；//1.用户终端2。网络错误3。解码错误4。媒体MediaObj.currentSrc的4.URL//Current状态无效；//返回URLMediaObj.src=当前资源的值；//返回或设置当前资源的URL media obj . canplaytype(type)；//能否以一定格式播放资源media obj . network state；//0.此元素未初始化。1.很正常但是没有使用网络。2.下载数据。3.找不到资源media obj . load()；//重新加载src指定的资源MediaObj.buffered//返回缓冲区，TimeRangesMediaObj.preload//none:不预加载元数据：预加载资源信息auto://ready state media obj . ready state；//1:HAVE _ NOTHING//2:HAVE _ METADATA//3。HAVE_CURRENT_DATA //4。HAVE_FUTURE_DATA //5。HAVE _ ENOUGH _ datamediaobj . seeking；//是否求//播放状态media obj . current time=value；//当前播放位置，赋值可以改变位置media obj . start time；//一般为0，如果是流媒体或者不是从0开始的资源，就不是0 media obj . duration；//当前资源长度流返回无限media obj . paused；//是否暂停media obj . defaultplaybackrate=value；//默认播放速度，可以设置media obj . playback rate=value；//当前播放速度，设置后立即更改media obj . played；//返回已经播放的区域，时间范围。有关此对象，请参见下面的MediaObj.seekable//返回可查找的区域TimeRangesMediaObj.ended//是否结束MediaObj.autoPlay//是否自动播放MediaObj.loop//是否循环播放media obj . play()；//播放media obj . pause()；//暂停//视频控件MediaObj.controls//有没有默认的控制条MediaObj.volume=value//volume media obj . muted=value；//Mute //TimeRanges (area)对象TimeRanges.length//区域段个数TimeRanges.start(index) //索引段区域起始位置TimeRanges.end(index) //索引段区域结束位置//[* *相关事件* *]//事件分布var Event tester=function(e){ media . addevent listener(e，function(){ console . log((new Date()))。getTime()，e) }，false)；}//事件侦听event tester( loadstart )；//客户端开始请求数据event tester(“progress”)；//客户端正在请求数据event tester(“suspend”)；//延迟下载event tester( abort )；//客户端主动终止eventTester(loadstart )的下载(不是由错误引起的)；//客户端开始请求数据event tester(“progress”)；//客户端正在请求数据event tester(“suspend”)；//延迟下载event tester( abort )；//客户端主动终止下载(非错误导致)，event tester( error )；//请求数据时遇到错误event tester(“stalled”)；//网速失速event tester( play )；//eventTester(pause )在//play()和autoplay开始播放时触发；//pause()触发event tester( loaded metadata )；//成功获取资源长度event tester( loaded data )；//event tester( waiting )；//等待数据，不是error event tester( playing )；//开始回放event tester( can play )；//可以播放，但是加载中途可能会挂起event tester( canplaythrough )；//可以播放，歌曲全部加载。event tester( seeking )；//查找event tester( seeked )；//完全找到event tester( time update )；//播放时间更改event tester( ended )；//结束播放event tester( rate change )；//播放速率变化event tester( duration change )；//资源长度更改event tester( volume change )；//卷变以上是本文的全部内容。希望对大家的学习和支持有帮助。

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