HTML还可以放音乐、放视频，真的吗？
📜个人简介
⭐️个人主页：微风洋洋🙋♂️
🍑博客领域：编程基础💡,后端💡,大数据,信息安全
🍅写作风格：干货,干货,还是tmd的干货
🌸精选专栏：【JavaScript】【HTML+CSS】【Java学习笔记】【Java必刷题】
🚀支持洋洋：点赞👍、收藏⭐、留言💬
好久不见，甚是想念！
大家好！
我是微风洋洋
今天这篇文章就是来和大家详细聊聊HTML中的一些多媒体Video元素和Audio元素，希望大家读完有所收获，那我辛苦码字也就值了。如果你觉得对你有一丢丢启发的话，不妨 点赞、收藏、关注支持一下，你的支持将是我继续创作的最大动力。下一篇将介绍HTML中常见的数据库Indexed DB，到时不见不散~~~
一、HTML5的Video元素
1.使用video标记插入视频
代码格式：
<video src="url" controls="controls">替代文字</video>
<video>标记常用属性及说明
示例1
代码
效果
2. video元素的访问控制
video元素重要的方法和事件。调用这些方法和事件可以访问和控制video对象。
<video>标记常用方法和事件
示例2
代码
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>视频测试</title>
<style type="text/css">
button {
display: block;
}
</style>
</head>
<body>
<video width="600" height="400">
<source src="images/movie1.mp4"/>
您的浏览器不支持 video 标记
</video>
<button onclick="toggle();">播放</button>
<script type="text/javascript">
function toggle() {
var video = document.getElementsByTagName("video")[0];
var bnt = document.getElementsByTagName("button")[0];
if (video.paused) {
video.play();
bnt.firstChild.nodeValue = "暂停";
} else {
video.pause();
bnt.firstChild.nodeValue = "播放";
}
}
</script>
</body>
</html>
效果
示例3
代码
<!-- demo0503.html -->
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
</head>
<body>
<video id="myVideo" width="320" height="240" controls>
<source src="images/lego.ogv" type="video/ogv">
<source src=" images/lego.mp4" type="video/mp4">
<source src=" images/lego.webm" type="video/webm">
<object data=" images/lego.mp4" width="320" height="240">
<embed width="320" height="240" src=" images/lego.swf">
</object>
</video>
<br>
<button onClick="document.getElementById('myVideo').play()">播放</button>
<button onClick="document.getElementById('myVideo').pause()">暂停</button>
<button onClick="document.getElementById('myVideo').volume += 0.1">音量+</button>
<button onClick="document.getElementById('myVideo').volume -= 0.1">音量-</button>
<button onClick="document.getElementById('myVideo').muted = true">静音</button>
<button onClick="document.getElementById('myVideo').muted = false">取消静音</button>
</body>
</html>
效果
二、HTML5的Audio元素
1.使用audio标记插入音频
<audio src="url" controls="controls">替代内容</audio>
<audio>标记的常用属性、取值及说明
audio标记插入音频示例
2. audio元素的访问控制
通过单击按钮触发对象的play()方法和pause()方法实现播放状态的改变；
音量和静音控制则是通过修改对象的volume属性和muted属性实现。
三、使用track元素添加字幕
1.使用track标记插入字幕文件
track元素是video元素的子元素， <track>标记必须被书写在 video元素的开始标记与结束标记之间。
<track>标记的常用属性及说明
示例4
代码
<!-- demo0507.html -->
<!DOCTYPE html>
<html>
<head>
</head>
<body>
<video width="600" id="clip" controls>
<source src="images/sintel.mp4" type="video/mp4"/>
<track kind="captions" src="vtt/sintel-en.vtt" srclang="en"
label="English captions"/>
<track kind="captions" src="vtt/sintel-zh.vtt" srclang="zh-cn"
label="Chinese" default/>
</video>
</body>
</html>
效果
2.建立WebVTT文件
track元素引用的文件是内部包含了一系列时间标记的文本文件，WebVTT文件是可以添加到轨道中的视频播放器可以显示的文本文件。
在 HTML5中通过<track>标记引用WebVTT文件，这表示可以为音频或视频等媒体资源提供诸如字幕、标题或描述等信息，并将这些信息同步显示在媒体资源中。
（1）WebVTT文件格式
WebVTT (Web Video Text Tracks)是一种文件格式，本质上是是一种文本文件，使用UTF-8编码，文件扩展名为.vtt。
（2）WebVTT标记
WebVTT文件内容由一些WebVTT标记组成，标记之间用行分隔符分开。用户可以在WebVTT标记中书写字幕与字幕应用的时间范围。
（3）使用Video Caption Maker生成WebVTT文件
为媒体添加字幕的关键是构建WebVTT轨道文件。WebVTT文件可以手动创建，也可以使用创作工具构建。如果手工创建文件，写代码非常麻烦，并且字幕与媒体的同步需要反复测试修改。
HTML5视频字幕制作工具是一个简单有效的工具，该工具可以用于创建 WebVTT文件。
四、总结
HTML5的Video元素和Audio元素是新出现的元素，对于一些老用户来说可能还不太了解，而且用的也不是特别频繁，但是我们要知道书到用时方恨少，储备一些必要的知识还是很有用的，通过这篇文章的学习，我们可以基本了解多媒体元素的应用。
关注，即可提高学习效率。Perfect！
- 点赞
- 收藏
- 关注作者
评论（0）