0
点赞
收藏
分享

微信扫一扫

#yyds干货盘点# HTML5的Video元素和Audio元素

一、HTML5的Video元素

 
1.使用video标记插入视频

代码格式:

<video src="url" controls="controls">替代文字</video>

<video>标记常用属性及说明

QQ截图20220202224005.png
 
示例1

代码

QQ截图20220202224302.png

效果

QQ截图20220202225029.png

  1. video元素的访问控制
     video元素重要的方法和事件。调用这些方法和事件可以访问和控制video对象。

<video>标记常用方法和事件

 

QQ截图20220202224444.png

示例2

代码

`<!-- demo0502.html -->
<!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>

效果

QQ截图20220202225112.png

 

 

示例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>

效果

QQ截图20220202225147.png

二、HTML5的Audio元素

1.使用audio标记插入音频

&lt;audio src="url" controls="controls"&gt;替代内容&lt;/audio&gt;

&lt;audio&gt;标记的常用属性、取值及说明

QQ截图20220202225414.png

audio标记插入音频示例

QQ截图20220202225607.png

QQ截图20220202225636.png

  1. audio元素的访问控制

通过单击按钮触发对象的play()方法和pause()方法实现播放状态的改变;

音量和静音控制则是通过修改对象的volume属性和muted属性实现。

QQ截图20220202225829.png

 

三、使用track元素添加字幕

1.使用track标记插入字幕文件

 track元素是video元素的子元素, &lt;track&gt;标记必须被书写在 video元素的开始标记与结束标记之间。

&lt;track&gt;标记的常用属性及说明
 

QQ截图20220202225945.png

示例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>

 

效果

QQ截图20220202230201.png

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文件。

QQ截图20220202230336.png

四、总结

HTML5的Video元素和Audio元素是新出现的元素,对于一些老用户来说可能还不太了解,而且用的也不是特别频繁,但是我们要知道书到用时方恨少,储备一些必要的知识还是很有用的,通过这篇文章的学习,我们可以基本了解多媒体元素的应用。

举报

相关推荐

0 条评论