html5学习(多媒体，播放视频)

最新推荐文章于 2024-08-07 21:02:54 发布

程宇寒

最新推荐文章于 2024-08-07 21:02:54 发布

阅读量242

点赞数

文章标签： html html5 多媒体视频播放 video

本文链接：https://blog.csdn.net/czh500/article/details/111873343

版权

html5学习(多媒体，播放视频)

播放视频主要是使用<video></video>标签，我本篇文章只是抛砖引玉，还有很多<video>标签的api我没列举出来，<video>标签的其他很多属性，方法，事件我没有列举出来，大家可以自行查阅相关文档！

播放视频的代码并不太多，主要就是使用<video></video>标签；注意：低版本的浏览器可能不支持<video></video>标签

video标签的poster属性可以设置视频的开头图片<br />
<video id="video2" controls poster="../img/panda4.jpg">
<source src="../video/test.mp4" type="video/mp4">
<source src="../video/test.ogg" type="video/ogg">
您的浏览器版本太低，不支持视频播放，请升级浏览器！
</video>

直接po图和代码

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>html5学习(多媒体，播放视频)</title>
<link rel="stylesheet" type="text/css" href="../css/inputAndDiv.css">
<style type="text/css">
video {
	width: 600px;
	height: 400px;
}
</style>
</head>
<body style="background-color: #CCE8CF;">
<h3>html5学习(多媒体，播放视频)</h3>
第一种写法<br />
<video id="video1" src="../video/test.mp4" controls width="600px" height="400px">
您的浏览器版本太低，不支持视频播放，请升级浏览器！
</video>
<br />
第二种写法(推荐)<br />
video标签的poster属性可以设置视频的开头图片<br />
<video id="video2" controls poster="../img/panda4.jpg">
<source src="../video/test.mp4" type="video/mp4">
<source src="../video/test.ogg" type="video/ogg">
您的浏览器版本太低，不支持视频播放，请升级浏览器！
</video>
<br />
<input type="button" value="开始播放" id="play" style="width: 100px;">
<input type="button" value="重新加载" id="reload" style="width: 100px;">
</body>
<script type="text/javascript">
function $(elementId) {
	return document.getElementById(elementId);
}

var input1Node = $("play");
var input2Node = $("reload");
var video2Node = $("video2");
console.log(input1Node);
console.log(input2Node);
console.log(video2Node);

//开始播放视频
input1Node.onclick = function() {
	video2Node.play();
}

//重新加载视频
input2Node.onclick = function() {
	video2Node.load();
}
</script>
</html>

完！