• <embed>标签：使用此标签可以直接插入视频文件（直接将视频塞入页面），它的本质上是调用本机上已经安装的软件，但是这种方式对于视频本身来说存在不可控，并且兼容性的问题也无法顾及。
  • 采用flash插件：首先需要安装flash，存在两个问题：1.学习flash增加成本；2.苹果设备不支持flash。

所以说在此之后的html5中新增了一些多媒体标签

  • <audio>音频标签，定义声音，比如音乐或其他音频流。
    参数：src：文件路径；controls：音频播放器的控制面板；autoplay：自动播放；loop：循环
    提示：可以在开始标签和结束标签之间放置文本内容，这样老的浏览器就可以显示出不支持该标签的信息。

支持<audio>标签浏览器

不支持 <audio>标签浏览器

Internet Explorer 9+

Internet Explorer 8 以及更早的版本不支持 <audio>标签

Firefox

Opera

Chrome

Safari

<audio src="./images/song.mp3" controls>
	 Your borwser does not support the audio tag.
</audio>
  • <video>标签定义视频，比如电影片段或其他视频流。
    参数：src：文件路径；controls：音频播放器的控制面板；autoplay：自动播放；loop：循环播放；width：宽度；height：高度；poster：当视频还没有完全下载，或者用户还没有点击播放前的默认显示封面。默认显示当前视频文件第一帧画面。

注意事项：当设置宽高的时候，一般情况下只设置宽度或者高度，让其自动等比缩放。如果同时设置宽度和高度，那么视频并不会真正的调整到设置的宽高，除非设置值刚好是等比例的。且不同浏览器所支持的视频格式是不一样的 。

支持<video>标签浏览器

不支持 <video>标签浏览器

Internet Explorer 9+

Internet Explorer 8 以及更早的版本不支持 <video>标签

Firefox

Opera

Chrome

Safari

<video src="../movie.ogv" width="320" height="240" controls='controls'>
    Your borwser does not support the video tag.
</video>

解决浏览器所支持的视频格式是不一样的方法：采用source标签

  • <source>标签可以连接不同的视频文件。浏览器将会使用第一个可识别格式。
<video width="320" height="240" controls="controls">
    <source src="../movie.ogv">
    <source src="../movie.mp4">
    You borwser does not support the video tag.
</video>
  • video常用DOM操作
    play()：开始播放视频。
    pause()：暂停当前播放的视频。
    playbackRate：改变播放速度。
  • video案例 完整代码：
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>video属性Dom控制</title>
    <style>
        *{
            margin: 0;
            padding: 0;
        }
    </style>
</head>
<body>
    <div style="text-align: center;">
        <video src="./images/mov_bbb.mp4" preload="metadata" controls></video>
        <!-- 点击调用播放暂停方法 -->
        <button onclick="playPause()">播放/暂停</button>
        <button onclick="makeBig()">改变大</button>
        <button onclick="makeSmall()">改变小</button>
        <button onclick="playBack()">改变播放速度</button>
    </div>
    <script>
        //获取元素
        var myVideo = document.getElementsByTagName('video')[0]
        //播放暂停方法
        function playPause(){
            //如果视频此时的状态是暂停状态,则点击时调用播放方法;否则调用暂停方法
            if(myVideo.paused){
                myVideo.play()
            }else{
                myVideo.pause()
            }
        }
        //增大宽度
        function makeBig(){
            myVideo.width = 560;
        }
        //减小宽度
        function makeSmall(){
            myVideo.width = 320;
        }
        //改变播放速度
        function playBack(){
            var speed = 2;
            myVideo.playbackRate = speed;
        }
    </script>
</body>
</html>

结束微语：掩埋了泪眼的斑驳，在转角之后扣上故事门锁