提供了编程的基础技术教程

zl程序教程

您现在的位置是：首页 >  其它

当前栏目

视频记忆--上次播放时间--适于pc

-- 时间 视频 播放 PC 记忆 上次
2023-09-14 09:13:42 时间 
<!DOCTYPE html>
<html>
    <head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1, maximum-scale=1, user-scalable=no">
<title>放到服务器上测试效果--记忆播放时间</title>
<script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script>
<script src="https://cdn.bootcss.com/store.js/1.3.20/store.js"></script>
<script>
// 整体代码响应式处理--手机
var kk = document.documentElement.clientWidth;
if (kk > 750) {
	kk = 750
}
document.documentElement.style.fontSize = kk / 7.5 + "px"
</script>
</head>
	    <body>
		    <div class="div">
			 	<video class="video000" id="myvideo" controls="controls" style="width: 6rem;height: 200px;"x5-playsinline>
				<source src="1_0.mp4" type="video/mp4"></source>
			</video>
		</div>
		<script type="text/javascript">
			var video = document.getElementsByTagName('video')[0];

			var currentTime = localStorage.getItem("currentTime");
			console.log(currentTime);
			video.addEventListener("loadedmetadata", function() {
				this.currentTime = currentTime;
			});

			video.addEventListener("timeupdate", function() {
				var currentTime = Math.floor(video.currentTime);
				localStorage.setItem("currentTime", currentTime);
				console.log(localStorage.getItem("currentTime"));
			});
			video.setAttribute("x5-playsinline", ""); //这是处理视频兼容--不让放大
		</script>
	</body>
</html>

相关文章