HTML 媒体元素

简介

HTML5 出现之前大多数多媒体是通过插件（如 Flash）来实现，没有一项网页上多媒体播放的标准；
HTML5 音频

HTML5 <audio> 元素实现了音频播放的标准，解决了音频播放需要安装插件等不统一的问题；
HTML5 <audio> 元素目前之前三种音频格式：WAV、OGG 和 MP3；它们的后缀名分别为：.wav、.ogg 和 .mp3;
MIME 类型分别为： audio/wav、audio/ogg、audio/mpeg。

HTML5 视频

HTML5 <video> 元素目前之前三种音频格式：WebM、OGG 和 MP4；它们的后缀名分别为：.webm、.ogg 和 .mp4;
HTML5 <video> 元素实现了视频播放的标准，解决了视频播放需要安装插件等不统一的问题；
MIME类型分别为： audio/webm、audio/ogg、audio/mp4。

相关标签

HTML5 视频主要是下面两个元素

元素	说明
video	定义一个视频
audio	定义一个音频
source	定义媒体资源
track	媒体播放器文本轨迹

相关属性

属性	说明
audioTracks	可用音频轨道的 AudioTrackList 对象
textTracks	返回可用文本轨道的 TextTrackList 对象
videoTracks	返回可用视频轨道的 VideoTrackList 对象
autoplay	是否在加载完成后随即播放媒体
buffered	表示音频/视频已缓冲部分的 TimeRanges 对象
controller	当前媒体控制器的 MediaController 对象
crossOrigin	设置或返回媒体的 CORS 设置
currentSrc	当前媒体的 URL
currentTime	设置或返回媒体中的当前播放位置（单位：秒）
defaultMuted	设置或返回默认是否静音
defaultPlaybackRate	设置或返回默认播放速度
duration	返回当前媒体的长度（单位：秒）
ended	播放是否已结束
error	错误状态的 MediaError 对象
loop	是否应在结束时重新播放
mediaGroup	媒体所属的组合
muted	是否静音
networkState	返回媒体当前网络状态
paused	设置或返回媒体是否暂停
playbackRate	设置或返回媒体播放的速度
played	返回表示媒体已播放部分的 TimeRanges 对象
preload	设置或返回媒体是否应该在页面加载后进行加载
readyState	返回媒体当前的就绪状态
seekable	返回表示媒体可寻址部分的 TimeRanges 对象
seeking	返回用户是否正在媒体中进行查找
src	设置或返回媒体元素的当前来源
startDate	返回当前时间偏移的 Date 对象
volume	设置或返回媒体的音量

兼容性

除了 IE8 及更早版本外所有主流浏览器均支持 <audio> 和 <video> 元素

实例

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Media</title>
    <style>
        .flex-container {
            display: -webkit-flex;
            display: flex;
            justify-content: center;
        }
    </style>
    <script type="text/javascript">
        function playPause() {
            var myVideo = document.getElementById("video1");
            if (myVideo.paused)
                myVideo.play();
            else {
                myVideo.pause();
            }
        }
        function makeBig() {
            document.getElementById("video1").width = 560;
        }
        function makeSmall() {
            document.getElementById("video1").width = 320;
        }
        function makeNormal() {
            document.getElementById("video1").width = 420;
        }
    </script>
</head>
<body>

<h4>HTML5 音频</h4>
<audio controls>
  <!--  <source src="ring01.wav" type="audio/wav">
    <source src="ring.wav" type="audio/wav">-->
    <source src="https://s.tinyx.cc/audios/ring.ogg" type="audio/ogg">
    此浏览器不支持 audio 标签
</audio>

<h4>HTML5 视频</h4>
<div style="text-align:center;width:420px">
    <video id="video1" width="420px">
        <source src="https://s.tinyx.cc/videos/video.mp4" type="video/mp4">
        您的浏览器不支持 HTML5 video 标签。
    </video>
    <br>
    <div class="flex-container">
        <input onclick="playPause()" type="button" value="播放/暂停"/>
        <input onclick="makeBig()" type="button" value="放大"/>
        <input onclick="makeSmall()" type="button" value="缩小"/>
        <input onclick="makeNormal()" type="button" value="普通"/>
    </div>
</div>
</body>
</html>

效果：

上一篇：HTML WebSocket 下一篇：HTML 画布

root

留下评论取消回复