HTML还可以放音乐，放视频（真的吗？）

微风洋洋

已于 2022-03-12 16:44:58 修改

阅读量1.2k

点赞数 5

分类专栏： HTML+CSS 文章标签： html css3 前端 js 算法

于 2022-02-03 19:47:29 首次发布

本文链接：https://blog.youkuaiyun.com/qq_51547965/article/details/122777970

版权

HTML+CSS 专栏收录该内容

9 篇文章

订阅专栏

📜个人简介

⭐️个人主页：微风洋洋🙋‍♂️
🍑博客领域：编程基础💡,后端💡,大数据,信息安全
🍅写作风格：干货,干货,还是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对象。

标记常用方法和事件
微风洋洋
示例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>

效果

在这里插入图片描述