web播放器常见问题处理方案

最新推荐文章于 2024-02-26 10:33:10 发布

Peter 谭

最新推荐文章于 2024-02-26 10:33:10 发布

阅读量791

点赞数

文章标签：内核 css html javascript android

本文链接：https://blog.csdn.net/petertanjinjie/article/details/113409882

版权

本文探讨了Web播放器在实际应用中遇到的兼容性、浏览器劫持、全屏实现和控制条隐藏等问题，提供了相应的解决方案，包括针对Android 4.4.4前版本的MediaSource兼容性问题，浏览器内核对播放器的劫持处理，以及在不同环境下实现全屏和隐藏控制条的方法。

摘要由CSDN通过智能技术生成

为了优化HLS的效果，视频云的Web播放器使用了MediaSource，在Android 4.4.4之前的版本对于MediaSource的支持不佳，会存在兼容性问题，不建议在Android 4.4.4之前的版本使用进行HLS播放。另外，从Android 4.4开始，Android系统默认的WebView内核更改成Chromium内核，与之前的版本不一样。

HTML5下的音视频播放是通过<video>标签的方式进行，通常，浏览器内核不会对页面<video>标签指定的播放器进行劫持，但在一些应用中，如UC浏览器、QQ浏览器提供了自己的内核（手机淘宝等APP使用了UC内核，QQ、微信等APP的内置浏览器使用了QQ浏览器内核），这些APP中进行视频播放时，会将<video>标签解析替换成自己的播放器，进行播放器劫持。

在<video>标签中增加属性playsinline 、webkit-playsinline（这个属性是iOS 10中设置可以让视频在小窗内播放）。另外，在微信、QQ等使用X5内核浏览器中，还可以使用x5-playsinline（适应微信等X5内核）、x5-video-player-type、x5-video-player-fullscreen、x5-video-orientation等属性来控制全屏，示例如下：