video标签支持的视频,前端video标签

　　随着4G的普及和WiFi的广泛使用，手机上的网速已经足够稳定和高，以视频为主的HTML5也越来越受欢迎。与帧动画相比，视频的表现更加丰富。下面是一些实践经验。

　　video的属性

　　video id= video src= video . MP4 controls= true poster= images . jpg /* video cover */preload= auto WebKit-plays online= true /*该属性在ios 10中设置为允许视频在小窗口播放，即不是全屏播放* */plays inline= true /* IOS/* IOS微信浏览器支持小窗口播放*/x-WebKit-airplay= allow X5-video-player-type= H5 /。 而设置为true是为了防止横屏*/X5-video-orientation= portrain //玩家付费的方向，横向风景横向，portrain纵向，默认值是竖屏style= object-fit: fill

　　控件：通过这个属性，Gecko将提供用户控件，允许用户控制视频播放，包括音量、跨帧、暂停/恢复播放。

　　Poster:属性指定下载视频时要显示的图像，或者在用户单击播放按钮之前要显示的图像。如果未设置此属性，则使用视频的第一帧。

　　Preload:属性指定在加载页面后应加载视频。

　　Webkit-playsinline和PlaysOnline:视频播放时会在本地播放，不会脱离文档流。不过这个属性比较特殊，只有在网页中嵌入了APP的情况下才能生效，比如微信中UIwebview的allowsinlinemediaplayback=yes webview . allowsinlinemediaplayback=yes。换句话说，如果没有设置应用程序，将此标签添加到您的页面是无效的。这就是为什么安卓手机微信总是全屏播放视频，因为APP不支持playsinline，而ISO的微信支持。

　　这里我想补充一下，如果是想做全屏直播或者全屏H5体验的用户，IOS需要设置delete webkit-playsinline标签页，因为你设置false就不支持了，Android也不需要，因为默认是全屏。但是这个时候全屏有一个播放控件，不管你有没有设置控件。直播可能需要播放控件，但不需要全屏H5。要在全屏播放时移除控件，需要以下设置：同层播放。

　　X-webkit-airplay=allow :这个属性应该是为了让这个视频支持ios的airplay功能。使用AirPlay可以直接在iOS设备上播放不同位置的视频、音乐、照片文件，也就是说可以通过AirPlay功能实现音视频文件的无线播放，前提是播放的终端设备也支持相应的功能。

　　X5-video-player-type:启用同层的H5播放器，即视频全屏时，视频层可以呈现div，这也是微信安卓版独有的属性。同层播放别名也叫沉浸式播放。玩的时候看起来是全屏的，但是控制和微信的导航条都被去掉了，只剩下‘X’和’‘键。目前其同行播放器只在安卓(包括微信)上运行，暂时不支持iOS。至于为什么同层播放只对安卓开放，那是因为安卓不能像ISO一样本地播放，默认全屏会屏蔽一些界面操作。如果是全屏H5的话还好，但是如果是直播的话，弹幕之类的功能就无法实现了，所以同层播放的概念就在这个时候解决了这个问题。但是在测试的过程中发现，IOS和Android不同版本的效果略有不同。

　　X5-video-orientation:声明播放器支持的方向，可选值为landscape landscape和portraint。默认值portraint。无论是直播还是全屏H5，一般都是竖着玩，但是这个属性需要x5-video-player-type才能开启H5模式。

　　X5-视频-播放器-全屏：全屏设置。它的两个属性值，true和false，true支持全屏播放，false不支持全屏播放。其实IOS微信浏览器是Chrome的内核，所有相关属性都支持，这也是不支持X5图层播放的原因。安卓浏览器是X5内核，playsinline等一些属性标签不支持，所以一直是全屏。

　　全屏处理

　　ios

　　添加ios playsinline属性。ios10之后，带有webkit前缀的系统会被挂机。这两个属性加上基本的ios端可以保证在浏览器webview中有所克制。如果还有个别版本的ios可以挂机播放，也可以参考一个库iphone-inline-video(具体用法很简单。看看它github，这里不介绍了。只需添加js和css)。Github地址加上playsinline webkit的两个属性——play sinline和这个库基本可以保证在ios端没有问题(不过亲测一下，不引入库的情况下增加这两个属性好像也可以。到目前为止，ios端的微信没有任何问题。如果想要兼容uc或qq的浏览器，建议带上这个库)。

　　机器人

　　X5-video-player-type=h5 属性。腾讯x5内核是安卓微信和webview的内核，webview是手q内置浏览器的浏览器，利用这个属性，视频在微信中会有不同的表现，会以全屏状态出现。播放控制好像被剥离了。至少加入这个属性后，视频上层可以出现其他dom元素(这不是腾讯白名单机制的处理措施)。

　　video id= video src= xx . MP4 playsinline WebKit-playsinline/video自动播放

　　安卓不能一直自动玩，不多说了。值得一提的是，经过测试，ios10之后的版本safari和微信都不让视频自动播放(音频也不能自动播放)。不过微信提供了一个事件WeixinJSBridgeReady，在微信嵌入webview的事件之后，视频依然可以自动播放。这应该是现在在ios上播放微信的视频比较靠谱的方式。其他的，比如手Q或者其他浏览器，建议还是引导用户触屏比较好。

　　document . addevent listener( weixinsbridgeready ，function(){ video . play()；video . pause()；}，false)播放控制

　　对于视频或音频等媒体元素，有一些方法，常用的有play()和pause()；还有一些事件，如“加载开始”、“可以播放”、“可以播放完”、“结束”、“时间更新”.诸如此类。

　　移动端有一些坑需要注意。不要轻易使用除 ended ended ， timeupdate 之外的媒体元素的event事件。在不同的手机上可能会有不同的情况，比如在ios下监测 canplay 和 canplaythrough (是否缓冲了足够的数据可以流畅播放)，加载时不会触发，即使preload=auto 也没用。Ios需要先玩，才会被触发。总之现在的视频标准并不完善，需要注意的漏洞很多。在使用它们之前，你最好自己测试一下。

　　也就是在ios端第一次播放视频时，如果网络慢，从视频开始播放到可以显示画面会有短暂的黑屏(处理视频源数据的时间)。要避免这种黑屏，可以在视频上加一个div浮动层(可以用假视频的第一帧)，然后用timeupdate的方法进行监控，等视频播放有画面的时候再去掉浮动层。

　　video . addevent listener( time update ，function(){//当视频的currentTime大于0.1时，表示黑屏时间已过，有视频画面。您可以移除浮动层(的div元素。pagestart) if(！video . is played this . current time 0.1){ $(。pagestart’)。淡出(500)；video.isPlayed=！0;}})隐藏播放控件

　　据说腾讯android团队的x5内核团队已经放开了视频播放的限制，视频也不一定调用他们备受诟病的视频播放器。x5-video-player-type=h5 属性似乎就是这个意思。虽然体验还是有点.(导航栏也会被清空)，至少播放器控件没了，上层可以浮动div或者其他元素。这个还是值得一提的。另外值得一提的是播放器控件的隐藏。

　　 div class= video box ontouchmove= return false；video id= main video src= test . MP4 X5-video-player-type= H5 play online WebKit-play online/video/div。比如这个videobox就隐藏在android下。似乎display:none不仅不起作用，还可以通过添加一个z-index:-1并将其设置为-1来隐藏播放器控件。

　　参考文章

　　5-手机视频的安卓兼容性，除了播放控制和全屏。

　　MDN-视频

　　微信中H5Video标签的坑和技巧

　　移动终端上HTML5video视频播放的优化实践

　　微信视频播放问题

　　这就是这篇关于Html5视频标记视频的最佳实践的文章。更多相关Html5视频内容，请搜索之前的文章或者继续浏览下面的相关文章。希望你以后能支持我！

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