播放器常见问题处理方案"/>
web播放器常见问题处理方案
1、兼容性问题
为了优化HLS的效果，视频云的Web播放器使用了MediaSource，在Android 4.4.4之前的版本对于MediaSource的支持不佳，会存在兼容性问题，不建议在Android 4.4.4之前的版本使用进行HLS播放。另外，从Android 4.4开始，Android系统默认的WebView内核更改成Chromium内核，与之前的版本不一样。
2、浏览器劫持
HTML5下的音视频播放是通过
<video>标签的方式进行，通常，浏览器内核不会对页面<video>标签指定的播放器进行劫持，但在一些应用中，如UC浏览器、QQ浏览器提供了自己的内核（手机淘宝等APP使用了UC内核，QQ、微信等APP的内置浏览器使用了QQ浏览器内核），这些APP中进行视频播放时，会将<video>标签解析替换成自己的播放器，进行播放器劫持。
3、Web端全屏的实现
在
<video>标签中增加属性playsinline 、webkit-playsinline（这个属性是iOS 10中设置可以让视频在小窗内播放）。 另外，在微信、QQ等使用X5内核浏览器中，还可以使用x5-playsinline（适应微信等X5内核）、x5-video-player-type、x5-video-player-fullscreen、x5-video-orientation等属性来控制全屏，示例如下：
<videoid="my-video" src="test.mp4" poster="poster.jpg" /*视频封面*/preload="auto" /*预加载*/webkit-playsinline="true" /*iOS 10中设置可以让视频在小窗内播放*/playsinline="true"x-webkit-airplay="allow" /*启用AirPlay支持*/x5-video-player-type="h5" /*对于x5内核声明启用同层H5播放器*/x5-video-player-fullscreen="true" /*全屏设置设置为 true 是防止横屏*/x5-video-orientation="portraint" /*播放器的方向，默认为竖屏*/></video>
4、隐藏控制条的实现（播放器非劫持状态）
隐藏播放器控制条（即
<video>标签的controls控件）需要以下几个步骤： 1)去除<video>标签中的controls属性（js中也需要设置”controls”: false，并对controlBar相关的字段进行设置）由于iOS及Android会对未标记controls属性的
<video>标签启用系统默认的控件，由此，还需要使用CSS来对这些默认控件进行隐藏，如下：
<style type="text/css">
*::-webkit-media-controls-enclosure {display:none !important;-webkit-appearance: none;
}
*::-webkit-media-controls-panel {display: none!important;-webkit-appearance: none;
}
*::-webkit-media-controls-panel-container {display: none!important;-webkit-appearance: none;
}
*::--webkit-media-controls-play-button {display: none!important;-webkit-appearance: none;
}
*::-webkit-media-controls-start-playback-button {display: none!important;-webkit-appearance: none;
}
*::-webkit-media-controls {
display: none!important;
-webkit-appearance: none;
}
</style>
由于控件被隐藏，而iOS及部分Android ROM限制浏览器默认不解析autoplay属性，需要引导用户点击，在点击事件中触发video.play()进行播放。通常建议的方式为引导用户点击自己制件的视频封面，在点击事件中触发播放。
更多推荐
web播放器常见问题处理方案
发布评论