H5学习之15 video audio 标签，以及视频音频能够最大可能正常的方式

最新推荐文章于 2024-05-31 22:11:41 发布

GOGOGOAAAA

最新推荐文章于 2024-05-31 22:11:41 发布

阅读量2.8k

点赞数

分类专栏： h5 文章标签： html5 audio video

本文链接：https://blog.csdn.net/qq_29469941/article/details/52080221

版权

h5 专栏收录该内容

33 篇文章 0 订阅

订阅专栏

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title></title>


</head>
<body>
一般情况下，网页加载音频有这样几种方法
<p><embed width="200px" height="100px" src="horse.mp3"></embed></p>
<!--embed标签加载音频-->
<br/>
<object  width="200px" height="100px" data="horse.mp3"></object>
<!--object加载音频-->
<br/>
<br/>
<audio controls="controls">
    <source src="horse.mp3" type="audio/mp3" />
    <!--
    audio标签
    <source src="horse.ogg" type="audio/ogg"/>
      如果为了怕浏览器无法播放mp3格式的，需要再添加一个ogg格式的音频。如果播放不了，就会播放ogg的
      但是我这里没有ogg格式的，就写一下。
  -->
</audio>
<br/>
<br/>
<b style="color: red;">但是并不是所有浏览器和机器都可以正常播放音频文件。所以为了音频能够正确播放的3种方式</b>
<p>第一种 audio标签 +embed标签
    <audio controls="controls" width="100px" height="100px">
        <source src="horse.mp3" type="audio/mp3">
        <source src="horse.mp3 " type="audio/ogg"/>
        <embed height="100" width="100" src="horse.mp3"></embed>
    </audio>
    <!--使用了两个不同的音频格式。HTML5 <audio> 元素会尝试以 mp3 或 ogg 来播放音频。如果失败，代码将回退尝试 <embed> 元素。-->
</p>

<p>第二种 使用雅虎播放器
    <a href="horse.mp3">使用雅虎播放mp3</a>
   <!-- <script type="text/javascript" src="http://mediaplayer.yahoo.com/js">
    </script>-->
    <!--使用雅虎媒体播放器是一个不同的途径。您只需简单地让雅虎来完成歌曲播放的工作就好了。
    它能播放 mp3 以及一系列其他格式。通过一行简单的代码，您就可以把它添加到网页中，轻松地将 HTML 页面转变为专业的播放列表。
    重要：：：：：：但是需要注意。这段代码需要放在底部，如果放在这里会造成加载过慢。放在底部则不会影响速度。
    这可能是因为执行到这的话，打开这个雅虎链接慢的话就不会进行下边的操作，如果放在下边就是先加载页面，再进行对这个链接的访问。
    -->
</p>

<p>第三种 使用超链接
<a href="horse.mp3">使用超链接播放，如果不做雅虎的设置，浏览器会自动调用辅助应用程序来播放</a>
</p>
<br/>
<br/>
<br/>

<p>一般情况下，网页加载视频有这样几种方法</p>

<video width="320" height="240" controls="controls">
    <source  src="movie.ogg" type="video/ogg"/>
    <!--<source src="movie.mp4"/>-->
    <!--需要上传两个视频格式，如果第一个不行，就用第二个。我这里没有MP4格式的就只写一句了-->
</video>
<br/>
<embed src="movie.ogg" width="200" weight="200"></embed>
<br/>
<object data="movie.ogg" width="200" weight="200"></object>
<br/>

<b style="color: red;">但是因为设备和浏览器的问题，为了大多数用户都能播放视频的3种方式</b>
<p >第一种 vido标签 +object标签+ embed标签
<video controls="controls" width="200" height="200">
    <source src="movie.ogg" type="video/ogg"/>
    <object data="movie.ogg" width="200" height="200">
        <embed src="movie.ogg" width="200" height="200"></embed>
    </object>
</video>
        <!--上例中使用了 4 中不同的视频格式。
        HTML 5 <video> 元素会尝试播放以 mp4、ogg 或 webm 格式中的一种来播放视频。
        如果均失败，则回退到 <embed> 元素。-->
<p/>

<p>第二种:上传到一些视频网站上,比如优酷
    <embed src="http://player.youku.com/player.php/sid/XMTY1MTY4MDM1Mg==/v.swf" width="480" height="400"></embed>
</p>

<p>第三种:超链接 使用超链接播放，浏览器会自动调用辅助应用程序来播放
    <a href="movie.ogg">点击此处观看视频</a>
</p>
<script type="text/javascript" src="http://mediaplayer.yahoo.com/js">
</script>
</body>
</html>

具体效果如下：

具体解释如下：

音频：

首先列出了3种常规显示音频的方法

一般情况下，网页加载音频有这样几种方法
<p><embed width="200px" height="100px" src="horse.mp3"></embed></p>
<!--embed标签加载音频-->
<br/>
<object  width="200px" height="100px" data="horse.mp3"></object>
<!--object加载音频-->
<br/>
<br/>
<audio controls="controls">
    <source src="horse.mp3" type="audio/mp3" />
    <!--
    audio标签
    <source src="horse.ogg" type="audio/ogg"/>
      如果为了怕浏览器无法播放mp3格式的，需要再添加一个ogg格式的音频。如果播放不了，就会播放ogg的
      但是我这里没有ogg格式的，就写一下。
  -->
</audio>

但是要做的还有兼容性，就是因为机器和浏览器等不同，有的时候可能不能正常播放音频，务必让所有人都能够正常播放这段音频。

<b style="color: red;">但是并不是所有浏览器和机器都可以正常播放音频文件。所以为了音频能够正确播放的3种方式</b>
<p>第一种 audio标签 +embed标签
    <audio controls="controls" width="100px" height="100px">
        <source src="horse.mp3" type="audio/mp3">
        <source src="horse.mp3 " type="audio/ogg"/>
        <embed height="100" width="100" src="horse.mp3"></embed>
    </audio>
    <!--使用了两个不同的音频格式。HTML5 <audio> 元素会尝试以 mp3 或 ogg 来播放音频。如果失败，代码将回退尝试 <embed> 元素。-->
</p>

<p>第二种 使用雅虎播放器
    <a href="horse.mp3">使用雅虎播放mp3</a>
   <!-- <script type="text/javascript" src="http://mediaplayer.yahoo.com/js">
    </script>-->
    <!--使用雅虎媒体播放器是一个不同的途径。您只需简单地让雅虎来完成歌曲播放的工作就好了。
    它能播放 mp3 以及一系列其他格式。通过一行简单的代码，您就可以把它添加到网页中，轻松地将 HTML 页面转变为专业的播放列表。
    重要：：：：：：但是需要注意。这段代码需要放在最底部，如果放在这里会造成加载过慢。放在底部则不会影响速度。
    这可能是因为执行到这的话，打开这个雅虎链接慢的话就不会进行下边的操作，如果放在下边就是先加载页面，再进行对这个链接的访问。
    -->
</p>

<p>第三种 使用超链接
<a href="horse.mp3">使用超链接播放，如果不做雅虎的设置，浏览器会自动调用辅助应用程序来播放</a>
</p>
<br/>
<br/>
<br/>

调用雅虎播放器代码放在了body的最下边

<script type="text/javascript" src="http://mediaplayer.yahoo.com/js">
</script>

视频：

三种常规显示视频的方法

<p>一般情况下，网页加载视频有这样几种方法</p>
<video width="320" height="240" controls="controls">
    <source  src="movie.ogg" type="video/ogg"/>
    <!--<source src="movie.mp4"/>-->
    <!--需要上传两个视频格式，如果第一个不行，就用第二个。我这里没有MP4格式的就只写一句了-->
</video>
<br/>
<embed src="movie.ogg" width="200" weight="200"></embed>
<!--embed标签-->
<br/>
<object data="movie.ogg" width="200" weight="200"></object>
<!--object标签-->

仍然需要做兼容性的操作，保证所有用户都尽可能正常播放视频

<b style="color: red;">但是因为设备和浏览器的问题，为了大多数用户都能播放视频的3种方式</b>
<p >第一种 vido标签 +object标签+ embed标签
<video controls="controls" width="200" height="200">
    <source src="movie.ogg" type="video/ogg"/>
    <object data="movie.ogg" width="200" height="200">
        <embed src="movie.ogg" width="200" height="200"></embed>
    </object>
</video>
        <!--上例中使用了 4 中不同的视频格式。
        HTML 5 <video> 元素会尝试播放以 mp4、ogg 或 webm 格式中的一种来播放视频。
        如果均失败，则回退到 <embed> 元素。-->
<p/>

<p>第二种:上传到一些视频网站上,比如优酷
    <embed src="http://player.youku.com/player.php/sid/XMTY1MTY4MDM1Mg==/v.swf" width="480" height="400"></embed>
</p>

<p>第三种:超链接 使用超链接播放，浏览器会自动调用辅助应用程序来播放
    <a href="movie.ogg">点击此处观看视频</a>
</p>

GOGOGOAAAA

关注

0
点赞
踩
3

收藏

觉得还不错? 一键收藏
0
评论
H5学习之15 video audio 标签，以及视频音频能够最大可能正常的方式

html>lang="en"> charset="UTF-8"> 一般情况下，网页加载音频有这样几种方法width="200px" height="100px" src="horse.mp3">标签加载音频-->width="200px" height="100px" data="horse.mp3">加载音频-->controls="controls
复制链接

扫一扫