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>

效果:

留下评论

电子邮件地址不会被公开。 必填项已用*标注