wechat video not full screen 解决方案

最新推荐文章于 2024-05-20 13:05:27 发布

树欲静而风不止

最新推荐文章于 2024-05-20 13:05:27 发布

阅读量1.3k

点赞数

分类专栏：微信文章标签： wechat video not ful 微信视频实现局部播放

本文链接：https://blog.csdn.net/zjy660358/article/details/52711245

版权

微信专栏收录该内容

17 篇文章 0 订阅

订阅专栏

<!DOCTYPE HTML>
<html>
	<head>
		<title>test</title>
		<meta name="viewport"
			content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no" />
		<script type="text/javascript">
			window.addEventListener("load", function(){
				var fps = 1000/50;
				var videoObj = document.getElementById("myVideo");  
				var canvasObj = document.getElementById("myCanvas");  
				setInterval(function(){  
				canvasObj.getContext("2d").drawImage(videoObj, 0, 0,canvasObj.width, canvasObj.height); 
				}, fps);
			
				canvasObj.width  = window.innerWidth;
				canvasObj.height  = window.innerWidth*(视频高/视频宽);
			
				canvasObj.addEventListener('click', function(e){   
	            if (myVideo.paused)
	            	myVideo.play();
	        	else
	            	myVideo.pause()  
	             
	        	}, false);
			
			}, true);
			
		</script>
	</head>

	<body style="margin: 0px; padding: 0px;">
	
	
	
		<div style="width:100%;display:none;">
			<video id="myVideo" width="100%" src="source" controls="controls" loop="loop" preload="preload">
			Your browser does not support the video tag.
			</video>
		</div>
		<br/>
		
		<canvas id="myCanvas" ></canvas>
	</body>
</html>

已经实现canvas宽度自适应

注意：js中的fps这个数值各位自己找中间点。