html的video标签讲解,html中video标签添加属性
视频HTML5是一个视频媒体标签，用来在网页中嵌入指定的视频。视频标签的代码结构和参数如下。
HTML代码结构：
视频控件自动播放循环preload= auto poster= img/popup-img . png WebKit-playsinline= true playsinline= true X5-video-player-type= H5 X5-video-player-full screen= true x-WebKit-airplay= allow X5-vid EO-orientation= port raint style= object-fit:fill source src= video . MP4 type= video/MP4 source src= video。Codecs=dirac，speex您的浏览器不支持codevideo/code标签。/p/视频参数说明：
控件-显示标准的HTML5视频/音频播放器控制栏和控制按钮。自动播放-让文件自动播放。循环播放-让文件循环播放。Preload-property用于缓存大容量文件。它有三个可选值： none 不缓存， auto 缓存， metadata 只缓存文件元信息poster-video cover WebKit-plays inlin= true ——这个属性在ios 10中设置为有用，其他的还不行。让视频在小窗口播放，也就是不全屏播放line= true-iOS微信浏览器支持小窗口播放x5-video-player-type= h5 -启用H5播放器，这是微信安卓版X5的一个特性-video-player-全屏= true -全屏设置，设置为true防止横向X5-video-orientation= portraint -播放器屏幕的方向，横向横向和portraint纵向，默认值为纵向。source-tag将与支持不同媒体类型的各种浏览器兼容。我们可以使用多个源/源元素来提供多种不同的媒体类型。支持mp4格式视频流的浏览器可以播放mp4文件，如果不支持，也可以播放Ogg文件。编解码器=dirac，speex-是用于指定回放的解码器(编解码器);这将允许浏览器更准确地播放所提供的视频。特别说明：
1.webkit-playsinline和PlaysOnline参数使视频在播放时在本地播放，不会脱离文档流。但只有在网页内嵌的UIwebview的APP(如微信)中，allowsInlineMediaPlayback=YES，webview . allowsInlineMediaPlayback=YES，才能生效。也就是说，如果没有设置APP，那么在标签中加入这两个属性也是无效的，这也是为什么微信这种安卓手机总是全屏播放视频的原因，因为APP不支持playsinline，而ISO的微信支持。
2.对于做全屏直播或者全屏H5体验的用户，ISO需要删除webkit-playsinline标签，因为不支持false属性值，安卓默认全屏，不需要设置。此外，无论您是否设置控件，全屏都有播放控件。
3.x-webkit-airplay=allow 暂时无法确切知道它的功能。我猜这个属性应该是为了让这个视频支持ios的AirPlay功能。使用AirPlay可以在使用iOS的设备上直接播放不同位置的视频、音乐和照片文件，这意味着可以通过AirPlay功能无线播放音频和视频文件，前提是播放的终端设备也支持相应的功能。
4.x5-video-player-type启用同层H5播放器，即视频全屏时，视频层可以呈现div，这也是微信安卓版独有的属性。
同层播放别名也叫沉浸式播放。玩的时候看起来是全屏的，但是控制和微信的导航条都被去掉了，只剩下‘X’和键。目前其同行播放器只在安卓(包括微信)上运行，暂时不支持iOS。至于为什么同层播放只对安卓开放，那是因为安卓不能像ISO一样本地播放，默认全屏会屏蔽一些界面操作。如果是全屏H5的话还好，但是如果是直播的话，弹幕之类的功能就无法实现了，所以同层播放的概念就在这个时候解决了这个问题。但是在测试的过程中发现，不同版本的ISO和Android效果略有不同。
5.x5-video-orientation声明玩家支持的方向。可选值为横屏或竖屏，默认值为竖屏。无论是直播还是全屏H5，一般都是竖着玩，但是这个属性需要x5-video-player-type才能开启H5模式。
6、X5-视频X5-视频-播放器-全屏全屏设置。它有两个属性值，true和false。true支持全屏播放，false不支持全屏播放。其实ISO微信浏览器是Chrome的内核，所有相关属性都支持，这也是不支持同层X5播放的原因。安卓浏览器是X5内核，playsinline等一些属性标签不支持，所以一直是全屏。
7.在安卓的微信中，即使添加了上述属性，也会出现上下有黑边，不能全屏显示的问题。解决方案：添加对象适合：填充到视频；的样式属性。如果还是有黑边，可能是视频尺寸不合适。
总结
以上是边肖推出的html5视频媒体标签video的用法和完整参数的详细说明。希望对你有帮助。如果您有任何问题，请给我留言，边肖将及时回复您。非常感谢您对网站的支持！
如果你觉得这篇文章对你有帮助，请转载，请注明出处，谢谢！
郑重声明：本文由网友发布，不代表盛行IT的观点，版权归原作者所有，仅为传播更多信息之目的，如有侵权请联系，我们将第一时间修改或删除，多谢。