html5页面怎么播放音频和视频

一、总结

一句话总结：html5 音频和视频标签：（audio And video），局限是不同浏览器对音频视频的格式支持很让人头痛

1、最基础的音频和视频标签的使用？

直接是标签里面带src接对应音频视频的位置

<audio controls src="http://www.w3school.com.cn/i/song.mp3">

</audio>

<video src="http://www.w3school.com.cn/example/html5/mov_bbb.ogg" controls>

        您的浏览器不支持video元素

</video>

2、video标签如何带字幕？

video标签的使用（带字幕文件）

<video src="http://www.w3school.com.cn/example/html5/mov_bbb.ogg">

        <!--此处添加字幕文件-->

        <track label="English" kind="subtitles" srclang="en" src="./test.vtt" default>

        您的浏览器不支持html5 video

    </video>

<!--字幕文件的格式如下：-->

    <pre>

        WEBVTT

        1

        00:00:00.240 --> 00:00:04.130

        大家好 最近 Visual Studio 2013 做了一些更新

        2

        00:00:04.140 --> 00:00:08.110

        那我们今天请到 twMVC 的 Dino

        来为我们介绍这个更新里面关于 SASS Editor 的部分

        3

        00:00:18.120 --> 00:00:19.280

    </pre>

3、音频视频标签多source的情况怎么选择？

audio source元素

<audio controls>

        <source src="http://www.w3school.com.cn/i/song.mp3">

        <source src="http://www.w3school.com.cn/i/song.ogg">

    </audio>

source提供多个音频元素，供浏览器自身播放能力自动选择，如果支持的不知一种，浏览器会选择第一个来源。

4、抓取视频的新途径？

通过canvas

 <!doctype html>

 <meta charset="utf-8">

 <html>

     <title></title>

     <body>

         <video id="movies" src="test.mp4" controls="controls" autobuffer="true" oncanplay="startVideo()" onended="stopTimeLine()" width="1920px" height="758px">

         </video>

         <canvas id="timeLine" width="1920px" height="758px">

         </canvas>

     </body>

     <script>

         var updataInterval = 100;//抓取帧的时间间隔

         var frameWidth = 1920;//时序中帧的尺寸

         var frameHeight = 758;

         //时序中总的帧数

         var frameRows = 4;

         var frameColumns = 4;

         var frameGrid = frameRows*frameColumns;

        //当前帧

         var frameCount = 0;

         //播放完取消计时器

         var intervalid;

         var videoStart = false;

         //添加updateFrame函数

         function updateFrame(){

             var video = document.getElementById('movies');

             console.log(video.videoWidth);

             console.log(video.videoHeight);

             var timeline = document.getElementById('timeLine');

             var cxt = timeline.getContext('2d');

             //根据帧数计算出当前播放的播放的位置

             //然后以视频为输入参数绘制图像

             var framePos = frameCount%frameGrid;

             var frameX = (framePos%frameColumns)*frameWidth;

             var frameY = (framePos%frameRows)*frameHeight;

             cxt.drawImage(video,,,,,frameX,frameY,frameWidth,frameHeight);

             frameCount++;

         }

         function startVideo(){

             if(videoStart){

                 return;

             }

             videoStart = true;

             updateFrame();

             intervalId = setInterval(updateFrame,updataInterval);

         }

         //处理用户输入

         var timeLine = document.getElementById('timeLine');

         timeLine.onclick = function(evt){

             var offX = evt.layerX - timeLine.offsetLeft;

             var offY = evt.layerY - timeLine.offsetTop;

             var clickedFrame = Math.floor(offY/frameHeight)*frameRows;

                 clickedFrame += Math.floor(offX/frameWidth);

             var seekedFramed = (((Math.floor(frameCount/frameGrid)*frameGrid)) + clickedFrame);

             if(clickedFrame > (frameCount%16)){

                 seekedFramed = frameGrid;

             }

             if(seekedFramed < 0){

                 return;

             }

             var video =  document.getElementById('movies');

             video.currentTime = seekedFramed*updataInterval/1000;

             frameCount = seekedFramed;

         }

         function stopTimeLine(){

             clearInterval(intervalId);

         }

     </script>

 </html>

二、html5 音频和视频（audio And video）

1、音频和视频

Web 上的视频
直到现在，仍然不存在一项旨在网页上显示视频的标准。
今天，大多数视频是通过插件（比如 Flash）来显示的。然而，并非所有浏览器都拥有同样的插件。
HTML5 规定了一种通过 video 元素来包含视频的标准方法。

视频格式
当前，video 元素支持三种视频格式：
格式　　 IE 　　 Firefox 　　 Opera 　　Chrome 　　Safari
Ogg 　　 No 　　 3.5+ 　　 10.5+ 　　 5.0+ 　　　　No
MPEG4 　　9.0+ 　 No No 　　　　 5.0+ 　　　　3.0+
WebM 　　 No 　 4.0+ 　　 10.6+ 　　　6.0+ 　　　　No
Ogg = 带有 Theora 视频编码和 Vorbis 音频编码的 Ogg 文件
MPEG4 = 带有 H.264 视频编码和 AAC 音频编码的 MPEG 4 文件
WebM = 带有 VP8 视频编码和 Vorbis 音频编码的 WebM 文件

补充：在火狐最新版本下发现其是支持MP4视频格式的，感谢楼主@正在缓冲的补充！

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

音频格式
当前，audio 元素支持三种音频格式：
　　　　　　　　IE 9 　　Firefox 3.5 　　 Opera 10.5 　　 Chrome 3.0 　　 Safari 3.0
Ogg Vorbis 　　　　　　 √ 　　　　　　　　 √ 　　　　　　 √
MP3　　　　　　 √ 　　　　　　　　　　　　　　　　　　　　 √ 　　　　　 √
Wav 　　　　　　　　　 √ 　　　　　　　　 √ 　　　　　　　　　　　　　　 √

简单的video元素创建

<video src="http://www.w3school.com.cn/example/html5/mov_bbb.ogg" controls>

        您的浏览器不支持video元素

</video>

视频默认的大小是300*150
controls：显示视频的默认的控件

video标签的使用（带字幕文件）

<video src="http://www.w3school.com.cn/example/html5/mov_bbb.ogg">

        <!--此处添加字幕文件-->

        <track label="English" kind="subtitles" srclang="en" src="./test.vtt" default>

        您的浏览器不支持html5 video

    </video>

<!--字幕文件的格式如下：-->

    <pre>

        WEBVTT

        1

        00:00:00.240 --> 00:00:04.130

        大家好 最近 Visual Studio 2013 做了一些更新

        2

        00:00:04.140 --> 00:00:08.110

        那我们今天请到 twMVC 的 Dino

        来为我们介绍这个更新里面关于 SASS Editor 的部分

        3

        00:00:18.120 --> 00:00:19.280

    </pre>

audio元素创建

<audio controls src="http://www.w3school.com.cn/i/song.mp3">

</audio>

controls:显示通用的用户控件，包括开始，停止，跳播，以及音量控制

audio source元素

<audio controls>

        <source src="http://www.w3school.com.cn/i/song.mp3">

        <source src="http://www.w3school.com.cn/i/song.ogg">

    </audio>

source提供多个音频元素，供浏览器自身播放能力自动选择，如果支持的不知一种，浏览器会选择第一个来源。

媒体的控制自动播放

<audio autoplay controls>

        <source src="http://www.w3school.com.cn/i/song.mp3">

        您的浏览器不支持audio

    </audio>

autoplay:设置音频自动播放

2、可脚本话的视频和音频

判断浏览器支持情况

  //    判断浏览器是否支持audio或者video元素最简单的办法是用脚本动态创建它，然后检测特定的函数是否存在

        var hasVideo = !!(document.createElement('video').canPlayType);

js中控制音频或者视频的内置的方法

　　　　　　load() 　　　　　　　加载音频或者视频文件，为播放做准备。通常情况下不需要调用，除非是动态创建的的元素，用来在在播放前加载

        　play() 　　　　　　　加载（如果还未加载完成）并播放音频或视频文件，除非音频或视频已经暂停在其他位置了，否则从头开始

       　 pause() 　　　　　　 暂停处于播放的视频或者音频文件

        　canPlayType(type)  试video元素是否支持给定MIME类型的文件

js中控制音频或者视频的内置只读属性

　　　　　duration    整个媒体文件的播放时长，以s为单位，如果无法获取时长返回NaN

        paused        如果媒体文件当前被暂停，则返回true,如果还未开始播放也返回true

        ended        如果媒体文件已经播放完毕。返回true

        startTime    返回最早的播放起始时间，一般是0.0，除非是从缓冲过的文件，并且一部分已经不在缓冲区了！

        error        在发生错误的时候返回的错误代码

        currentSrc    以字符串的形式返回当前正在播放的或已经加载的文件，对应于浏览器就是source选择的文件

js中可被脚本修改并影响播放的部分媒体元素的特性

　　　　 autoplay        将媒体文件设置为创建后自动播放，或者查询是否已经设置autoplay

        loop            如果媒体文件已经播放完毕后能重新播放则返回true,或者媒体将媒体文件设置为循环播放

        currentTime        以s为单位返回从开始播放到现在所用的时间，在播放过程中，设置currentTime来进行搜索，并定位到媒体文件特定的位置

        controls        显示或隐藏用户控制界面，或者查询用户控制界面当前是否可见

        volume            在0.0到1.0之前设置音频音量的值，或者查询当前音量的相对值

        muted            为音频文件设置静音或者消除静音，或者检测当前是否为静音

        autobuffer        通知播放器在媒体文件开始播放前是否进行缓冲加载，如果媒体文件设置autoplay,则忽略该属性

video元素的额外特性

　　　　poster                    在视频加载完成之前，代表视频内容的图片的url地址，该属性可读可写，可以随意修改

        width,height             取或设置显示的尺寸。如果设置的宽度与视频本身大小不匹配，可能导致四周会出现黑色区域

        videoWidth,videoHeight   返回视频固有的宽度和高度，只读

3、html5通过canvas抓取视频（实例演示）

<!doctype html>

<meta charset="utf-8">

<html>

    <title></title>

    <body>

        <video id="movies" src="test.mp4" controls="controls" autobuffer="true" oncanplay="startVideo()" onended="stopTimeLine()" width="1920px" height="758px">

        </video>

        <canvas id="timeLine" width="1920px" height="758px">

        </canvas>

    </body>

    <script>

        var updataInterval = 100;//抓取帧的时间间隔

        var frameWidth = 1920;//时序中帧的尺寸

        var frameHeight = 758;

        //时序中总的帧数

        var frameRows = 4;

        var frameColumns = 4;

        var frameGrid = frameRows*frameColumns;
       //当前帧

        var frameCount = 0;

        //播放完取消计时器

        var intervalid;

        var videoStart = false;

        //添加updateFrame函数

        function updateFrame(){

            var video = document.getElementById('movies');

            console.log(video.videoWidth);

            console.log(video.videoHeight);

            var timeline = document.getElementById('timeLine');

            var cxt = timeline.getContext('2d');

            //根据帧数计算出当前播放的播放的位置

            //然后以视频为输入参数绘制图像

            var framePos = frameCount%frameGrid;

            var frameX = (framePos%frameColumns)*frameWidth;

            var frameY = (framePos%frameRows)*frameHeight;

            cxt.drawImage(video,0,0,1920,758,frameX,frameY,frameWidth,frameHeight);

            frameCount++;

        }

        function startVideo(){

            if(videoStart){

                return;

            }

            videoStart = true;

            updateFrame();

            intervalId = setInterval(updateFrame,updataInterval);

        }

        //处理用户输入

        var timeLine = document.getElementById('timeLine');

        timeLine.onclick = function(evt){

            var offX = evt.layerX - timeLine.offsetLeft;

            var offY = evt.layerY - timeLine.offsetTop;

            var clickedFrame = Math.floor(offY/frameHeight)*frameRows;

                clickedFrame += Math.floor(offX/frameWidth);

            var seekedFramed = (((Math.floor(frameCount/frameGrid)*frameGrid)) + clickedFrame);

            if(clickedFrame > (frameCount%16)){

                seekedFramed = frameGrid;

            }

            if(seekedFramed < 0){

                return;

            }

            var video =  document.getElementById('movies');

            video.currentTime = seekedFramed*updataInterval/1000;

            frameCount = seekedFramed;

        }

        function stopTimeLine(){

            clearInterval(intervalId);

        }

    </script>

</html>

html5的audio和video元素的引入，让html5在媒体选择上可以不需要通过引入插件的形式来播放音频和视频文件，此外音频和视频的集成API方法也可以方便我们控制音频和视频！

参考： html5 音频和视频（audio And video） - 史洲宇 - 博客园
https://www.cnblogs.com/shizhouyu/p/4845989.html