video在微信浏览器的一些问题

男娘i 2022-05-27 06:56 227阅读 0赞

let video = document.querySelector('video')
    	      this.videoMethod(video)
    videoMethod (video) {
    	      video.addEventListener('touchstart', function () {
    	        video.play()
    	      })
    	      video.addEventListener('ended', function (e) {
    	        let second_btn_img = document.getElementsByClassName('second-btn-img')[0]
    	        second_btn_img.style.display = 'block'
    	        second_btn_img.onclick = function (params) {
    	          second_btn_img.style.display = 'none'
    	          document.getElementById('first-video').style.display = 'block'
    	          video.play()
    	        }
    	      })
    	      // 进入全屏
    	      video.addEventListener('x5videoenterfullscreen', function () {
    	        window.onresize = function () {
    	          video.style.width = window.innerWidth + 'px'
    	          video.style.height = window.innerHeight + 'px'
    	        }
    	      })
    	    }

## 详细解读 ##

### 属性 ###

#### preload="auto" ####

##### 是否预加载数据 #####

*  auto 页面加载后载入整个数据
 *  meta 页面加载后载入[元数据][Link 1]
 *  none 不载入视频

#### webkit-playsinline && playsinline="true" ####

*  **小窗播放** 使视频不脱离文本流，但是需要webview(allowsInlineMediaPlayback = YES webview.allowsInlineMediaPlayback = YES) ,结果就是**苹果支持，安卓不支持**。安卓会自动全屏播放。

#### x-webkit-airplay="allow" ####

*  字面意思 容许airplay (通过AirPlay可以把当前的视频投放到支持此技术的其他设备上。)
    
     *  如果是 video 标签，可以通过 x-webkit-airplay="allow" 属性开启；
     *  如果是 embed 标签，可以通过 airplay="allow" 属性开启。

#### x5-video-player-type="h5" && x5-video-player-fullscreen="true" &&x5-video-orientation="portraint" ####

*  建议看[官网文档][Link 2]非常详细 。**十分重要**必看。

#### object-fit:fill ####

*  填充尺寸 [详情][Link 3]

### 方法 ###

#### 自动播放 ####

setTimeout(function () { video.play(); }, 1000); //微信webview全局内嵌，WeixinJSBridgeReady方法 document.addEventListener("WeixinJSBridgeReady", function (){ video.play(); video.pause(); }, false); //诱导用户触摸 video.addEventListener('touchstart', function () { video.play(); });

#### 封面增减 ####

> 除ended,timeupdate其他事件慎用

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

参考文献、地址：

1、[https://segmentfault.com/a/1190000010377156][https_segmentfault.com_a_1190000010377156]

2、[https://x5.tencent.com/tbs/guide/video.html][Link 2]

3、[https://github.com/gnipbao/iblog/issues/11][https_github.com_gnipbao_iblog_issues_11]

4、[http://zhaoda.net/2014/10/30/html5-video-optimization/][http_zhaoda.net_2014_10_30_html5-video-optimization]

[Link 1]: http://www.ruanyifeng.com/blog/2007/03/metadata.html
[Link 2]: https://x5.tencent.com/tbs/guide/video.html
[Link 3]: http://www.zhangxinxu.com/wordpress/2015/03/css3-object-position-object-fit/
[https_segmentfault.com_a_1190000010377156]: https://segmentfault.com/a/1190000010377156
[https_github.com_gnipbao_iblog_issues_11]: https://github.com/gnipbao/iblog/issues/11
[http_zhaoda.net_2014_10_30_html5-video-optimization]: http://zhaoda.net/2014/10/30/html5-video-optimization/