视频标签 video的一些特殊属性详解

随着 4G 的普遍以及 WiFi 的广泛使用，手机上的网速已经足够稳定和高速，以视频为主的 HTML5 也越来越普遍了，相比帧，视频的表现更加丰富，这里介绍一些实践经验。

<video
  id="video" 
  src="video.mp4" 
  controls = "true"
  poster="images.jpg" /*视频封面*/
  preload="auto" 
  webkit-playsinline="true" /*这个属性是ios 10中设置可以
                     让视频在小窗内播放，也就是不是全屏播放*/  
  playsinline="true"  /*IOS微信浏览器支持小窗内播放*/ 
  x-webkit-airplay="allow" 
  x5-video-player-type="h5"  /*启用H5播放器,是wechat安卓版特性*/
  x5-video-player-fullscreen="true" /*全屏设置，
                     设置为 true 是防止横屏*/
  x5-video-orientation="portraint" //播放器支付的方向， landscape横屏，portraint竖屏，默认值为竖屏
  style="object-fit:fill">
</video>

<video id="video" src="xx.mp4" playsinline webkit-playsinline></video>

android始终不能自动播放，不多说微信浏览器 video标签。值得一提的是经测现在ios10后版本的safari和微信都不让视频自动播放了（顺带音频也不能自动播放了），但微信提供了一个事件WeixinJSBridgeReady，在微信嵌入webview全局的这个事件触发后，视频仍可以自动播放，这个应该是现在在ios端微信的视频自动播放的比较靠谱的方式，其他如手q或者其他浏览器，建议就引导用户出发触屏的行为操作出发比较好。

document.addEventListener("WeixinJSBridgeReady", function (){ 
    video.play();
    video.pause();
}, false)

对于video或者audio等媒体元素，有一些方法，常用的有play(),pause();也有一些事件，如'loadstart','canplay','canplaythrough','ended','timeupdate'.....等等。

在移动端有一些坑需要注意，不要轻易使用媒体元素的除'ended','timeupdate'以外event事件，在不同的机子上可能有不同的情况产生，例如：ios下'canplay'和'canplaythrough'（是否已缓冲了足够的数据可以流畅播放）,当加载时是不会触发的，即使preload="auto"也没用，但在pc的chrome调试器下和android下，是会在加载阶段就触发微信浏览器 video标签。ios需要播放后才会触发。总之就是现在的视频标准还不尽完善，有很多坑要注意，要使用前最好自己亲测一遍

就是当第一次播放视频的时候ios端，如果网络慢，视频从开始播到能展现画面会有短暂的黑屏（处理视频源数据的时间），为了避免这个黑屏，可以在视频上加个div浮层（可以一个假的视频第一帧），然后用timeupdate方法，视屏播放及有画面的时候再移除浮层

video.addEventListener('timeupdate',function (){
    //当视频的currentTime大于0.1时表示黑屏时间已过，已有视频画面，可以移除浮层（.pagestart的div元素）
    if ( !video.isPlayed && this.currentTime>0.1 ){
        $('.pagestart').fadeOut(500);
        video.isPlayed = !0;
    }
})

全格式播放器avplayer在iphone界里面享有盛名，最大的优势在于播放rmvb格式的软件，大家都知道，我们的视频播放器绝大部分都不支持rmvb、rm格式的视频，因为这些只有在电脑上播放，但是avplayer做到用软解的方式将rmvb格式的视频播放出来，虽然会有跳帧的现象，但是对于已经可以播放rmvb格式的视频来说，微不足道（之前有oplayer，现在已经被avplayer取代。来自csm全国网、48城市网和视频网站播放数据统计：央视三套播出的全新原创音乐选秀节目《中国好歌曲》表现超预期，以1.91%的收视率勇夺全国网收视冠军，同时以2.513的收视率成为csm48城市网收视冠军，其在独家网络视频平台腾讯视频上的点播量目前（数据截止1月6日中午12点）也达到了1588万，腾讯视频凭借《中国好歌曲》的强势拉动，实现了全平台播放量破3.5亿。微博的视频播放数据并不亚于腾讯视频的播放量，但明显可以看出，微博的重点在于短视频和话题的讨论，也就是比赛的二次发酵，这与其社交媒体属性相符。

<div class="videobox" ontouchmove="return false;">
    <video id="mainvideo" src="test.mp4" x5-video-player-type="h5" playsinline webkit-playsinline></video>
</div>

比如这个videobox在android下隐藏，只用display：none貌似还是不行的，但加个z-index:-1，设置成-1就可以达到隐藏播放器控件的目的了。

video::-internal-media-controls-download-button {
    display:none;
}
video::-webkit-media-controls-enclosure {
    overflow:hidden;
}
video::-webkit-media-controls-panel {
    width: calc(100% + 30px); 
}

html5--移动端视频video的android兼容，去除播放控件、全屏等

MDN-Video

视频H5のVideo标签在微信里的坑和技巧

移动端HTML5<video>视频播放优化实践

微信端视频播放问题

本文来自电脑杂谈，转载请注明本文网址：
http://www.pc-fly.com/a/bofangqi/article-102154-1.html