音频、视频&Flash文件（萌新必看）

最新推荐文章于 2024-02-29 11:01:47 发布

尐╋猪

最新推荐文章于 2024-02-29 11:01:47 发布

阅读量1.3k

点赞数 3

分类专栏：前端文章标签： html html5 css css3 javascript

本文链接：https://blog.youkuaiyun.com/qq_45623543/article/details/109142591

版权

前端专栏收录该内容

18 篇文章

订阅专栏

《个人学习笔记八》

embed标记

使用embed标记，可以播放的文件类型有MiNi、Mav、AIFF、SWF、AV、MP3、MOV、AVI等
语法说明

width 、
height：整型值单位为像素，设置宽度和高度会出现播放界面，否则不会出现播放界面。一些高版本浏览器不设置宽度和高度也会出现播放界面。如果播放音频作为背景音乐时，
必须同时将宽度和高度设置为0。
src:设置媒体文件的路径。
autostart：逻辑值。true为自动播放；false为不能自动播放。
loop：逻辑值。规定音频或视频文件能否循环播放。属性值为true时，会循环。属性值为false时，不会循环播放。
参考代码：

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>页面嵌入多媒体文件</title>
</head>

<body>
    <h3>插入老薛的歌</h3>
    <embed src="video/laoxue.mp3" width="300" height="150" autostart loop>
    <embed src="video/mov_bbb.mp4" width="300" height="150" autostart loop>
</body>

</html>

表现结果如下：
在这里插入图片描述

audio标记

audio标签用来向页面中引入一个外部的音频文件
音视频引入时，默认情况下不允许用户自己控制播放停止

常用属性	作用
controls	是否允许用户控制播放
autoplay	音频文件是否自动播放
loop	音乐是否循环播放

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>页面嵌入多媒体文件</title>
</head>

<body>
    <h3>插入老薛的歌</h3>
    <audio src="video/laoxue.mp3" controls autoplay loop></audio>

</body>

</html>

显示结果：
在这里插入图片描述
重点：
除了通过src来指定外部文件的路径以外，还可以通过source来指定文件

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>页面嵌入多媒体文件</title>
</head>

<body>
    <h3>插入老薛的歌</h3>
    <!-- <audio src="video/laoxue.mp3" controls autoplay loop></audio> -->


    <audio controls autoplay>
        <source src="video/laoxue.mp3">
        <source src="video/laoxue.ogg">
    </audio>
    <embed src="video/mov_bbb.mp4" type="video/mp4" width="300" height="150">


</body>

</html>