H5中利用canvas绘制video

最新推荐文章于 2024-05-31 22:20:16 发布

阿伦gh

最新推荐文章于 2024-05-31 22:20:16 发布

阅读量5.1k

点赞数 1

分类专栏： HTML5

本文链接：https://blog.csdn.net/sinat_21902709/article/details/88024590

版权

HTML5 专栏收录该内容

4 篇文章 0 订阅

订阅专栏

问题：

直接通过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>

阿伦gh

关注

1
点赞
踩
5

收藏

觉得还不错? 一键收藏
0
评论
H5中利用canvas绘制video

问题：直接通过video播放视频时，iOS会自动全屏。Android上浏览器正常，但Android中QQ、weichat内嵌浏览器自动全屏。需求：video播放视频时能够自动播放且不全屏，需适配大部分机型探索过程：1、使用内联播放属性：webkit-playsinline、playsinline解决了iOS上视频自动全屏问题，但是这个属性在Android中的qq和wechat上无效原...
复制链接

扫一扫