HTML5多媒体技术概览-优快云博客

文章目录

HTML5 中的一些有趣的新特性：

HTML5 中的一些有趣的新特性：

用于绘画的 canvas 元素
用于媒介回放的 video 和 audio 元素
对本地离线存储的更好的支持
新的特殊内容元素，比如 article、footer、header、nav、section
新的表单控件，比如 calendar、date、time、email、url、search

HTML5视频

直到现在，仍然不存在一项旨在网页上显示视频的标准。
今天，大多数视频是通过插件（比如 Flash）来显示的。然而，并非所有浏览器都拥有同样的插件。
HTML5 规定了一种通过 video 元素来包含视频的标准方法。
在这里插入图片描述
Ogg = 带有 Theora 视频编码和 Vorbis 音频编码的 Ogg 文件
MPEG4 = 带有 H.264 视频编码和 AAC 音频编码的 MPEG 4 文件
WebM = 带有 VP8 视频编码和 Vorbis 音频编码的 WebM 文件
注：mpeg4是一个编码标准，而mp4是一种文件格式，mp4是支持mpeg4的标准的音频视频文件，而支持mpeg4标准的文件格式有很多种，mp4和avi都是其中的一种。
【例】

<!DOCTYPE HTML>
<html>
<body>

<video width="1420" height="740" controls="controls" preload="metadata" loop="loop">
<source src="hahaha.mp4" type="video/mp4">
Your browser does not support the video tag.
</video>

</body>
</html>

controls 属性供添加播放、暂停和音量控件。
video 元素允许多个 source 元素。source 元素可以链接不同的视频文件。浏览器将使用第一个可识别的格式。
type属性用于说明src属性指定媒体的类型，帮助浏览器在获取媒体前判断是否支持此类别的媒体格式。
src使用的是相对路径，需要把资源放到当前.html文件夹中

可能的值：
绝对 URL - 指向另一个站点（比如 href=“http://www.yama.gz.cn/main.html”）
相对 URL - 指向网站内的文件（比如 href=“song.ogg”）

preload：如果出现该属性，则视频在页面加载时进行加载，并预备播放。
如果使用 “autoplay”，则忽略该属性。
id属性：在下面代码中用到，设置ID用于JavaScript代码

HTML5视频/DOM

同时对于视频播放控件也可以使用JavaScript来实现
点击播放视频
~~Github网页托管访问速度偏慢，并且某些浏览器不支持MPEG4编码格式，亲测手机端华为自带浏览器可行但控件失效，PC端Chrome~~
后来换成了自己的服务器，不卡！！！

<!DOCTYPE HTML>
<html>
<body>
    <div style="text-align:center;">
            <button onclick="playPause()">播放/暂停</button> 
            <button onclick="makeBig()">大画面</button>
            <button onclick="makeNormal()">中画面</button>
            <button onclick="makeSmall()">小画面</button>           
            <button onclick="setHalfVolume()" type="button">把音量设置为50%</button>
            <button onclick="setFullVolume()" type="button">把音量设置为100%</button>
            <br /> 
            <video  id="hahaha" width="1420" height="740" >  //网页首先会加载这个尺寸
                    <source src="673534481.mp4" type="video/mp4">
                    Your browser does not support the video tag.
            </video>
        </div> 
    <script type="text/javascript">
        var myVideo=document.getElementById("hahaha");    //！！！！注意
        function playPause()
        { 
        if (myVideo.paused) 
            myVideo.play(); 
        else 
            myVideo.pause(); 
        } 
        function makeBig()
        { 
        myVideo.width=560; 
        } 
        function makeSmall()
        { 
        myVideo.width=320; 
        } 
        function makeNormal()
        { 
        myVideo.width=420; 
        }
        function getVolume()
        { 
        alert(myVideo.volume);
        } 
        function setHalfVolume()
        { 
            myVideo.volume=0.2;
        } 
        function setFullVolume()
        { 
            myVideo.volume=1.0;
        } 
    </script> 
</body>
</html>

下面列出了大多数浏览器支持的视频方法、属性和事件：
注释：在所有属性中，只有 videoWidth 和 videoHeight 属性是立即可用的。在视频的元数据已加载后，其他属性才可用。

HTML5 播放音频的标准

直到现在，仍然不存在一项旨在网页上播放音频的标准。
今天，大多数音频是通过插件（比如 Flash）来播放的。然而，并非所有浏览器都拥有同样的插件。
HTML5 规定了一种通过 audio 元素来包含音频的标准方法。
audio 元素能够播放声音文件或者音频流。
在这里插入图片描述
点击播放《Breaking My Heart》

<!DOCTYPE HTML>
<html>
        <body>
        <audio src="yiyiyi.m4a" controls="controls" autoplay="autoplay">
          Your browser does not support the audio element.
          </audio>

        </body>
</html>

<video> 与 </video>之间插入的内容是供不支持 video 元素的浏览器显示的