H5中利用canvas绘制video

问题:

直接通过video播放视频时,iOS会自动全屏。Android上浏览器正常,但Android中QQ、weichat内嵌浏览器自动全屏。

需求:

video播放视频时能够自动播放且不全屏,需适配大部分机型

探索过程:

1、使用内联播放属性:webkit-playsinline、playsinline
解决了iOS上视频自动全屏问题,但是这个属性在Android中的qq和wechat上无效
原因:内联属性,需要嵌入网页的APP比如 WeChat中UIwebview 的allowsInlineMediaPlayback = YES webview.allowsInlineMediaPlayback = YES,才能生效

2、使用canvas播放video
在iOS上video不能自动播放,是要求必须有用户的真实操作来触发播放。并且在微信内置浏览器中会出现白屏问题,可能是由于微信禁止canvas的自动drawImage绘制
解决方法:添加预览图

解决方案:

通过canvas绘制video,并添加预览图
注意:外部需要添加video.mp4和preview.png资源

<!DOCTYPE html> 
<html lang="en"> 
	<head> 
		<meta charset="UTF-8"> 
		<meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1, maximum-scale=1, user-scalable=no"> 
		<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"/> 
		<title>demo</title>
		<script src="jquery-3.3.1.js"></script>
	</head>
	<style type="text/css">
		canvas {
			width: 100%;
			height: 100%;
		}
		video {
			display: none;
		}
	</style>
	<body>
		<!-- 
			object-fit: fill 视频内容充满整个video容器
			webkit-playsinline、playsinline 内联播放

			x5-video-player-type="h5" 启用x5内核H5播放器,是wechat安卓版特性
			x5-video-player-fullscreen="true" 全屏设置 true为防止横屏
			playsinline="true" iOS微信浏览器支持小窗内播放
		 -->
		<video  style="position:relative; object-fit:fill;" loop id="myVideo" 
			x5-video-player-type="h5"
			x5-video-orientation="h5"
			x5-video-player-fullscreen="true"
			x-webkit-airplay="true"
			x5-playsinline="true"
		
			webkit-playsinline="true"
			playsinline="true"
			
			src="video.mp4">
		</video>
		<canvas id="myCanvas"></canvas>
		<img src="preview.png" id="poster" style="display:none">
	</body>
</html>
<script>
	var video=document.getElementById('myVideo');
	var canvas = document.getElementById("myCanvas");

	var context = canvas.getContext("2d");
	canvas.width = window.innerWidth * 2.5;  //获取屏幕宽度作为canvas的宽度  这个设置的越大,画面越清晰(相当于绘制的图像大,然后被css缩小)
	canvas.height = window.innerHeight; 

	context.drawImage(poster, 0, 0, canvas.width, canvas.height) // canvas上绘制poster图片,也可以点击播放后隐藏图片无需绘制

	video.play()
	
	var timer = setInterval(function(){ // 绘制视频
		context.drawImage(video, 0, 0, canvas.width, canvas.height)
	},40)

	var isplay=false // 视频播放状态

	$('#myCanvas').on('touchstart',function(e){
			if(!isplay) { // 暂停 
				// 解决 由于iOS上视频不能自动播放,导致第一次需要点击两次才能播放视频的问题
				if (video.paused) {
					isplay=false
					video.play()
				} else {
					isplay=true
					video.pause()
				}
			} else { // 开始播放
					video.play()
					isplay=false
			}
	})
</script>
  • 1
    点赞
  • 5
    收藏
  • 打赏
    打赏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

阿伦gh

你的鼓励将是我创作的最大动力

¥2 ¥4 ¥6 ¥10 ¥20
输入1-500的整数
余额支付 (余额:-- )
扫码支付
扫码支付:¥2
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、C币套餐、付费专栏及课程。

余额充值