video标签兼容浏览器
uc浏览器 夸克浏览器 。。。。
视频中会已悬浮模式播放 —> 学名叫做浏览器劫持视频
!!!!!!6天整整6天 摸索出来了 废话不多说 上代码
<video
id={`js-video-play-${videoIndex}`}
data-video-id={videoIndex}
className="my-video"
preload="true"
autoPlay={autoPlay}
playsInline="isiPhoneShowPlaysinline"
x5-video-player-type="h5-page"
t7-video-player-type="inline"
webkit-playsinline="isiPhoneShowPlaysinline"
loop={autoPlay}
muted={true}
>
this.player = videojs(
document.getElementById(`js-video-play-${videoIndex}`),
{
autoplay: autoPlay,
loop: autoPlay,
sources: [
{
src: this.src,
},
],
muted: isMute,
techOrder: ["html5"],
preload: "metadata",
nativeControlsForTouch: false,
// ...this.props,
}
);
视频兼容
视频标签必须有
playsInline=“isiPhoneShowPlaysinline”
x5-video-player-type=“h5-page”
t7-video-player-type=“inline”
webkit-playsinline=“isiPhoneShowPlaysinline”
这四行
大概意思就是兼容各种内核的浏览器 告诉他inline播放
uc浏览器 夸克浏览器兼容
重点来了:通过上一部分发现大多浏览器都适配了 这时候遇到了uc 还是浮层播放 肿么办
解决方案:
初始化的时候 静音 isMute: true
在初始化结束后 按照各自的需求 可以设置 isMute:false
注意!!!自动播放的时候必须静音
看成品 uc完美适配