P8-前端基础-音视频标签
【摘要】
P8-前端基础-音视频标签
1.概述
网页中可以播放我们的音频文件和视频文件
audio 标签用来向页面中引入一个外部的音频文件video 标签用来向页面中引入一个外部的视频文件
2....
P8-前端基础-音视频标签
1.概述
网页中可以播放我们的音频文件和视频文件
- audio 标签用来向页面中引入一个外部的音频文件
- video 标签用来向页面中引入一个外部的视频文件
2.音视频标签基本使用
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>音视频</title>
</head>
<body>
<!--
audio 标签用来向页面中引入一个外部的音频文件的
音视频文件引入时，默认情况下不允许用户自己控制播放停止
属性：
controls 是否允许用户控制播放
autoplay 音频文件是否自动播放
- 如果设置了autoplay 则音乐在打开页面时会自动播放
但是目前来讲大部分浏览器都不会自动对音乐进行播放
loop 音乐是否循环播放
-->
<!-- 1.audio标签基本使用 -->
<!-- <audio src="./source/audio.mp3" controls autoplay loop>音频</audio> -->
<!-- 2.除了通过src来指定外部文件的路径以外，还可以通过source来指定文件的路径 -->
<audio controls>
<!-- 通过source可以指定多个格式的音频文件，如果浏览器不知道某一个音频格式不会影响播放。 -->
<source src="./source/audio.mp3">
<source src="./source/audio.ogg">
<!-- 针对IE8浏览器播放兼容 -->
<embed src="./source/audio.mp3" type="audio/mp3" width="300" height="100">
</audio>
<!--
3.使用video标签来向网页中引入一个视频
- 使用方式和audio基本上是一样的
-->
<video controls width="500" height="320">
<source src="./source/flower.mp4">
<source src="./source/flower.webm">
</video>
<!--
一般音频和视频文件放在我们的服务器上播放，会占用比较大的带宽。如果带宽不够就会造成播放卡顿，这个时候如果我们资金不充足，可以借助
第三方视频网站来播放我们的音视频文件，将我们的音视频文件上传到第三方平台例如优酷、酷狗等。在我们的项目中引用该文件播放地址就可以
借鸡下蛋啦。
-->
<iframe frameborder="0" src="https://v.qq.com/txp/iframe/player.html?vid=b00318l66nt" allowFullScreen="true" width="500" height="300"></iframe>
</body>
</html>
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
- 14
- 15
- 16
- 17
- 18
- 19
- 20
- 21
- 22
- 23
- 24
- 25
- 26
- 27
- 28
- 29
- 30
- 31
- 32
- 33
- 34
- 35
- 36
- 37
- 38
- 39
- 40
- 41
- 42
- 43
- 44
- 45
- 46
- 47
- 48
- 49
- 50
- 51
- 52
3.音视频效果
文章来源: brucelong.blog.csdn.net，作者：Bruce小鬼，版权归原作者所有，如需转载，请联系作者。
原文链接：brucelong.blog.csdn.net/article/details/112681056
【版权声明】本文为华为云社区用户转载文章，如果您发现本社区中有涉嫌抄袭的内容，欢迎发送邮件进行举报，并提供相关证据，一经查实，本社区将立刻删除涉嫌侵权内容，举报邮箱：
cloudbbs@huaweicloud.com
- 点赞
- 收藏
- 关注作者
评论（0）