音频视频在HTML中加载与使用

最新推荐文章于 2023-09-27 09:32:26 发布

henrik@

最新推荐文章于 2023-09-27 09:32:26 发布

阅读量355

点赞数

分类专栏：前端-javaweb 文章标签： html

本文链接：https://blog.csdn.net/luolvxing/article/details/116946146

版权

前端-javaweb 专栏收录该内容

3 篇文章 0 订阅

订阅专栏

音频视频在HTML中使用与加载

音频加载方式

<!DOCTYPE html>
<html lang="en">
<!-- 音频视频的应用-->
<head>
    <meta charset="UTF-8">
    <title>audio test</title>
</head>
<body>
    <!--
    音频的应用
    方法一：使用object元素和embed元素将音频包含在HTML文件中
    问题：object和embed相同点
    不同浏览器对音频格式的支持不同
    如果浏览器不支持该文件格式，没有插件的话 也无法播放音频文件
    如果计算机用户未安装插件，无法播放音频
    如果把文件转换为其他格式，任然无法在所有浏览器中播放
    注：embed标签在HTML4中是无效的，页面无法通过验证，可以在<!DOCTYPE html>声明解决
     -->
    <object height="100"  width="200"  data="../mp3/fash-zhousheng.mp3"></object>
    <embed  height="100" width="200" src="../mp3/fash-zhousheng.mp3"/>
    <br/>
    <br/>
    <br/>
    <!--
    方法二：使用HTML5中的audio标签
    问题：audio标签在HTML4中无效，页面无法通过验证，可通过声明来解决
    必须把音频文件转换为不同的格式
    audio在老的浏览器中不起作用
     -->
    <audio controls="contrls">
        <source src="../mp3/fash-zhousheng.mp3"/>
        <!--添加ogg，是为了使其在firefox和opera中也有效-->
        <source src="../mp3/fash-zhousheng.ogg"/>
        <!--当上面都失败后显示错误信息提示-->
        your browser does not support this audio format.
    </audio>
    <!--HTML最好的解决方式-->
    <br/>
    <audio controls="controls">
        <source src="../mp3/fash-zhousheng.mp3"/>
        <source src="../mp3/fash-zhousheng.ogg"/>
        <!--当audio尝试MP3和ogg播放音频都失败后，代码将回退到embed元素-->
        <embed height="100"  width="200" src="../mp3/fash-zhousheng.mps"/>
    </audio>
    <br/>
    <br/>
    <br/>

</body>
</html>

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>audio</title>
</head>
<body>
    <!--
    方法三：使用雅虎媒体播放器
    将下列的script代码嵌入网页的底部，JavaScript会自动为每首歌创建播放按钮
    雅虎播放器为您提供一个小型的播放按钮，而不是完整的播放器，但当您点击该按钮，会弹出停靠在窗框底部的完整的播放器
    再次点击它即可滑出
    问题：
    -->

    <a href="../mp3/fash-zhousheng.mp3">play 周深的大鱼</a>
    <script type="text/javascript" src="http://mediaplayer.yahoo.com.js"> </script>
</body>
</html>

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>audio4</title>
</head>
<body>
    <!--
    方法四：超链接，浏览器会自动启动“辅助应用程序”来播放音频文件
    -->
    <a href="../mp3/fash-zhousheng.mp3">play music</a>
</body>
</html>

视频加载方式

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>视频在HTML中的应用</title>
</head>
<body>
https://www.bilibili.com/video/BV1JA411N7Ha?from=search&seid=10183211625296383130
    <!--
    方法一：使用embed标签
    HTML4 无法识别 <embed> 标签。您的页面无法通过验证。
    如果浏览器不支持 Flash，那么视频将无法播放
    iPad 和 iPhone 不能显示 Flash 视频。
    如果您将视频转换为其他格式，那么它仍然不能在所有浏览器中播放。
    -->
    <embed height="300" width="100%" src="https://www.bilibili.com/video/BV1JA411N7Ha?from=search&seid=10183211625296383130"/>
    <br/>
    <br/>
    第二个视频文件
    <br/>
    <br/>
    <obiect height="300" width="100%" data="https://www.bilibili.com/video/BV1JA411N7Ha?from=search&seid=10183211625296383130"/>
</body>
</html>

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
    <!--
    方法三：使用HTML5的video标签
    -->
    <video width="320" height="240" controls="controls">
        <source src="../mp4/MP4.mov" type="video/mp4" />
        <source src="../mp4/MP4.ogg" type="video/ogg" />
        <source src="../mp4/MP4.webm" type="video/webm" />
        Your browser does not support the video tag.
    </video>
    <video width="320" height="240" controls="controls">
        <source src="../mp4/MP4.mov" type="video/mp4" />
        <source src="../mp4/MP4.ogg" type="video/ogg" />
        <source src="../mp4/MP4.webm" type="video/webm" />
        <object data="../mp4/MP4.mp4" width="320" height="240">
            <embed src="../mp4/MP4.swf" width="320" height="240" />
        </object>
    </video>
</body>
</html>

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
    使用优酷等视屏软件显示视屏
    <br/>
    <embed src="http://player.youku.com/player.php/sid/XMzI2NTc4NTMy/v.swf"
        width="480" height="400"
    type="application/x-shockwave-flash">
        <!-- 会提示不支持flash插件-->
    </embed>
    <br/>
    <embed src="http://static.youku.com/v/swf/qplayer.swf?winType=adshow&amp;VideoIDS=XMTE3NzQ0NTky &amp;
    isAutoPlay=false&amp;isShowRelatedVideo=false"
           wmode="transparent" width="238" align="center" border="0" height="180">

    <br/>
    使用超链接,使用超链接加载视频时时下载而不是直接在网页观看
    <br/>
    <a href="../mp4/MP4.mov">Play a video file</a>

</body>
</html>

注：在使用其他插件或者视频软件进行加载时，经常会出现不支持插件等现象

当需要内联音频或者内联视频时，必须考虑用户的方便性以及需求，只有当用户需要音频或者视频时，才播放相应音视频文件，当不需要时也能方便关闭。