H5 video视频使用

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

车家大少爷

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

阅读量1.1k

点赞数

分类专栏： Js 前端 H5 Video 文章标签： video

前端同时被 3 个专栏收录

132 篇文章 7 订阅

订阅专栏

43 篇文章 0 订阅

订阅专栏

5 篇文章 0 订阅

订阅专栏

参考http://www.w3school.com.cn/tags/html_ref_audio_video_dom.asp
效果如下：
在这里插入图片描述

<!DOCTYPE html>
<html>
<head>
	<meta content="text/html; charset=utf-8">
	<title>H5 video 测试</title>
</head>
<body>
		
	<video id="video" autoplay muted loop controls src="https://media.w3.org/2010/05/sintel/trailer.mp4"></video>
	
	<hr >
	
	<button type="button" onclick="play()">播放</button>
	<button type="button" onclick="pause()">暂停</button>
	<button type="button" onclick="load()">切换视频</button>
	<button type="button" onclick="open_voice()">打开声音</button>
	<button type="button" onclick="close_voice()">关闭声音</button>
	
</body>

<script type="text/javascript" charset="utf-8">
	var video = document.getElementById("video");
	
	function play(){
		video.play();
	}
	
	function pause(){
		video.pause();
	}
	
	function load(){
		video.src="http://clips.vorwaerts-gmbh.de/big_buck_bunny.mp4";
		video.load();
	}
	
	function open_voice(){
		video.muted = false;
	}
	
	function close_voice(){
		video.muted = true;
	}
	
	video.addEventListener("play", function(){
		console.log("视频播放")
	});
	
	video.addEventListener("pause", function(){
		console.log("视频暂停")
	});
	
	video.addEventListener("ended", function(){
		console.log("播放结束")
	});
	
	video.addEventListener("volumechange", function(e){
		if(video.muted)
			console.log("你关闭了声音")
		else
			console.log("你打开了声音")
	});
	
</script>
</html>