html5视頻新闻媒体标识video的应用方式及详细主要

2021-02-22 18:57 jianzhan

video是HTML5的1个视頻新闻媒体标识,其功效是在网页页面中嵌入特定的视頻,video标识的编码构造及主要参数以下。

HTML编码构造:

<video
    controls
    autoplay
    loop
    preload="auto"
    poster="img/popup-img.png"
    webkit-playsinline="true"
    playsinline="true"
    x5-video-player-type="h5"
    x5-video-player-fullscreen="true"
    x-webkit-airplay="allow" 
    x5-video-orientation="portraint"
    style="object-fit:fill">
        <source src="video.mp4" type="video/mp4">
        <source src="video.ogg" type="video/ogg; codecs=dirac, speex">
        <p>你的访问器不适用 <code>video</code> 标识.</p>
</video>

主要参数表明:

  • controls - 显示信息规范的 HTML5 视頻/声频播发器操纵条、操纵按钮。
  • autoplay - 让文档全自动播发。
  • loop - 让文档循环系统播发。
  • preload - 特性是用来缓存文件大致积文档的。它有3个可选值:"none" 不缓存文件、"auto" 缓存文件、"metadata" 只缓存文件文档元信息内容
  • poster - 视頻封面
  • webkit-playsinlin="true" - 这个特性在 ios 10中设定有效,别的的现阶段还不起功效,让视頻在小窗内播发,也便是并不是全屏播发
  • playsinline="true" - IOS手机微信访问器适用小窗内播发
  • x5-video-player-type="h5" - 开启H5播发器,是wechat安卓系统版特点
  • x5-video-player-fullscreen="true" - 全屏设定,设定为 true 是避免横屏
  • x5-video-orientation="portraint" - 播发器显示屏的方位,landscape横屏,portraint竖屏,默认设置值为竖屏。
  • source - 标识是以便可以适配各种各样访问器对不一样新闻媒体种类的适用,大家能够用好几个<source></source>元向来出示好几个不一样的新闻媒体种类。适用mp4文件格式视頻流的访问器能够播发mp4文档,假如不适用,能够播发Ogg文档。
  • codecs=dirac, speex - 是用来特定播发应用的解码器(codecs); 这样便可以更精准的让访问器怎样播发出示的视頻。

非常表明:

1、 webkit-playsinline 和 playsinline 主要参数使视頻播发局势域播发,不摆脱文本文档流,可是前提条件是必须嵌入网页页面的APP(例如WeChat手机微信)中UIwebview的 allowsInlineMediaPlayback = YES 、 webview.allowsInlineMediaPlayback = YES 时才可以起效。也便是说假如APP不设定,标识中添加了这两个特性也是失效的,这也便是为何安卓系统手机上WeChat播发视頻时一直全屏,由于APP不适用 playsinline ,而ISO的WeChat适用。

2、假如做全屏直播间或全屏H5体验的客户,ISO必须删掉 webkit-playsinline 标识,由于其实不适用 false 的特性值,而安卓系统默认设置全屏,因此不必须设定。此外,全屏是有播发控制的,不管你是不是设定 control 。

3、 x-webkit-airplay="allow" 临时没法准确的了解其功效,猜想这个特性应当是使此视頻适用ios的AirPlay作用,应用AirPlay能够立即从应用iOS的机器设备上的不一样部位播发视頻、歌曲也有相片文档,也便是说根据AirPlay作用能够完成影音文档的无线网络播发,自然前提条件是播发的终端设备机器设备也要适用相应的作用。

4、 x5-video-player-type 开启同层H5播发器,便是在视頻全屏的情况下,div能够展现在视頻层上,也是WeChat安卓系统版独有的特性。

同层播发别称也叫做沉浸于式播发,播发的情况下看似全屏,可是早已去除了 control 和手机微信的导航栏栏,只留下"X"和"<"两键。现阶段的同层播发器只在Android(包含手机微信)上起效,临时不适用iOS。至于为何同层播发只对安卓系统对外开放,是由于安卓系统不可以像ISO1样局域播发,默认设置的全屏会使得1些页面实际操作被阻止,假如是全屏H5还好,可是做直播间的话,诸如弹幕那样的作用就没法完成了,因此这时候候同层播发的定义就处理了这个难题。但是在检测的全过程中发现,不一样版本号的ISO和安卓系统实际效果略有不一样。

5、 x5-video-orientation 申明播发器适用的方位,可选值 landscape 横屏或 portraint 竖屏,默认设置值 portraint 。不管是直播间還是全屏H51般全是竖屏播发,可是这个特性必须 x5-video-player-type 打开H5方式

6、 x5­-video­-player­-fullscreen 全屏设定。它有 true 和 false 两个特性值,true适用全屏播发,false不适用全屏播发。实际上ISO 手机微信访问器是Chrome的核心,有关的特性都适用,也是为何X5同层播发不适用的缘故。安卓系统手机微信访问器是X5核心,1些特性标识例如 playsinline 就不适用,因此自始至终全屏。

7、在Android的手机微信里边,即使再加了上面的特性,还会出現左右有黑边,不可以全屏的难题。处理方法:给video再加 object-fit: fill; 的style特性。假如還是有黑边有将会是视頻规格不符合适。

总结

以上所述是网编给大伙儿详细介绍的html5视頻新闻媒体标识video的应用方式及详细主要参数表明详解,期待对大伙儿有一定的协助,假如大伙儿有任何疑惑请给我留言,网编会立即回应大伙儿的。在此也十分谢谢大伙儿对脚本制作之家网站的适用!
假如你感觉本文对你有协助,欢迎转载,烦请注明出处,感谢!