跳至正文

HTML5 微信 VIDEO 视频播放解决方案

  • 前端

　　Android 上，因为各个软件使用的浏览器渲染引擎不一样，所以视频播放的效果差异也很大，这里主要以微信为主。微信使用的是腾讯浏览器自带的X5内核。

　　而iOS是不允许使用第三方浏览器内核的，就是Google Chrome也是用的系统内建的Webkit浏览器内核 (就是WebView了)，APP 都是使用的系统自带的浏览器进行页面渲染,所以IOS的微信浏览器是Chrome的webkit内核。

　　这就导致H5页面在android和iOS微信中的部分表现差异，但由于X5内核是腾讯基于开源Webkit优化的浏览器渲染引擎，所以除了对video标签的挟持，和下载页跳转被腾讯应用宝挟持外，其他表现上还没有遇到特别折磨人的差别。

video的属性

<video
	id="videoID"
	src="video.mp4"
	poster="video.jpg"
	width="100%"
	controls							// 提供播放控件
	preload								// 自动播放视频，这个属性规定页面加载完成后载入视频
	loop="loop"							// 视频循环播放
	style="object-fit:fill"				// 加这个style会让 Android / web 的视频在微信里的视频全屏，如果是在手机上预览，会让视频的封面同视频一样大小
	x-webkit-airplay="true"				// 允许airplay（通过AirPlay可以把当前的视频投放到支持此技术的其他设备上。）
	playsinline="true"					// IOS微信浏览器支持小窗内播放
	webkit-playsinline="true"  			// 这个属性是ios 10中设置可以让视频在小窗内播放，也就是不是全屏播放
	x5-video-player-type="h5-page"		// 同层页面内播放，是安卓微信X5内核视频两种播放形态
	x5-video-orientation="portraint"	// 播放器支持的方向，landscape横屏，portraint竖屏，默认值为竖屏
	x5-video-player-fullscreen="true"	// 全屏设置，设置为 true 是防止横屏
	>
</video>
  • src: 视频的地址
  • controls: 加上这个属性，Gecko 会提供用户控制，允许用户控制视频的播放，包括音量，跨帧，暂停/恢复播放。
  • poster: 属性规定视频下载时显示的图像，或者在用户点击播放按钮前显示的图像。如果未设置该属性，则使用视频的第一帧来代替。
  • preload: 属性规定在页面加载后载入视频。
  • webkit-playsinline和playsinline: 视频播放时局域播放，不脱离文档流 。但是这个属性比较特别， 需要嵌入网页的APP比如WeChat中UIwebview 的allowsInlineMediaPlayback = YES webview.allowsInlineMediaPlayback = YES，才能生效。换句话说，如果APP不设置，你页面中加了这标签也无效，这也就是为什么安卓手机WeChat 播放视频总是全屏，因为APP不支持playsinline，而ISO的WeChat却支持。

    • 这里就要补充下，如果是想做全屏直播或者全屏H5体验的用户，IOS需要设置删除 webkit-playsinline 标签，因为你设置 false 是不支持的 ，安卓则不需要，因为默认全屏。但这时候全屏是有播放控件的，无论你有没有设置control。 做直播的可能用得着播放控件，但是全屏H5是不需要的，那么去除全屏播放时候的控件，需要以下设置：同层播放

  • x-webkit-airplay=”allow” : 这个属性应该是使此视频支持ios的AirPlay功能。使用AirPlay可以直接从使用iOS的设备上的不同位置播放视频、音乐还有照片文件，也就是说通过AirPlay功能可以实现影音文件的无线播放，当然前提是播放的终端设备也要支持相应的功能
  • x5-video-player-type: 启用同层H5播放器，就是在视频全屏的时候，div可以呈现在视频层上，也是WeChat安卓版特有的属性。同层播放别名也叫做沉浸式播放，播放的时候看似全屏，但是已经除去了control和微信的导航栏，只留下”X”和”<"两键。目前的同层播放器只在Android（包括微信）上生效，暂时不支持iOS。至于为什么同层播放只对安卓开放，是因为安卓不能像ISO一样局域播放，默认的全屏会使得一些界面操作被阻拦，如果是全屏H5还好，但是做直播的话，诸如弹幕那样的功能就无法实现了，所以这时候同层播放的概念就解决了这个问题。不过在测试的过程中发现，不同版本的IOS和安卓效果略有不同
  • x5-video-orientation: 声明播放器支持的方向，可选值landscape 横屏, portraint竖屏。默认值portraint。无论是直播还是全屏H5一般都是竖屏播放，但是这个属性需要x5-video-player-type开启H5模式
  • x5­-video­-player­-fullscreen:全屏设置。它又两个属性值，ture和false，true支持全屏播放，false不支持全屏播放。其实，IOS 微信浏览器是Chrome的内核，相关的属性都支持，也是为什么X5同层播放不支持的原因。安卓微信浏览器是X5内核，一些属性标签比如playsinline就不支持，所以始终全屏。

安卓版微信H5自动播放视频

<!--引入微信JSSDK-->
<script src="https://res.wx.qq.com/open/js/jweixin-1.4.0.js"></script>
<script>
	// 安卓微信X5视频自动播放，依赖微信JSSDK
	document.addEventListener("WeixinJSBridgeReady", function () {
    	document.getElementById("videoID").play();
    }, false);

	// X5内核视频事件：进入/退出全屏事件
	var video = document.getElementById('videoID');

	// 退出全屏通知
	video.addEventListener("x5videoexitfullscreen", function(){
		alert("player exitfullscreen");
	})

	// 进入全屏通知
	video.addEventListener("x5videoenterfullscreen", function(){
		alert("player enterfullscreen");
	})
</script>
标签: