淘先锋技术网

首页 1 2 3 4 5 6 7


<audio> 标签属性:

  • src:音乐的URL
  • preload:预加载
  • autoplay:自动播放
  • loop:循环播放
  • controls:浏览器自带的控制条
Html代码 
  1. <audio id=”media” src=”http://www.abc.com/test.mp3″ controls></audio>  

<video> 标签属性:

  • src:视频的URL
  • poster:视频封面,没有播放时显示的图片
  • preload:预加载
  • autoplay:自动播放
  • loop:循环播放
  • controls:浏览器自带的控制条
  • width:视频宽度
  • height:视频高度
Html代码 
  1. <video id=”media” src=”http://www.abc.com/test.mp4″ controls width=”400px” heigt=”400px”></video>  

获取HTMLVideoElement和HTMLAudioElement对象

Js代码 
  1. //audio可以直接通过new创建对象  
  2. Media new Audio(“http://www.abc.com/test.mp3″);  
  3. //audio和video都可以通过标签获取对象  
  4. Media document.getElementByIdx_x(“media”);  

Media方法和属性:

HTMLVideoElement 和 HTMLAudioElement 均继承自 HTMLMediaElement

Js代码 
  1. //错误状态  
  2.    Media.error; //null:正常  
  3.    Media.error.code; //1.用户终止 2.网络错误 3.解码错误 4.URL无效  
  4.   
  5. //网络状态  
  6.    Media.currentSrc; //返回当前资源的URL  
  7.    Media.src value; //返回或设置当前资源的URL  
  8.    Media.canPlayType(type); //是否能播放某种格式的资源  
  9.    Media.networkState; //0.此元素未初始化  1.正常但没有使用网络  2.正在下载数据  3.没有找到资源  
  10.    Media.load(); //重新加载src指定的资源  
  11.    Media.buffered; //返回已缓冲区域,TimeRanges  
  12.    Media.preload; //none:不预载 metadata:预载资源信息 auto:  
  13.   
  14. //准备状态  
  15.    Media.readyState;    //1:HAVE_NOTHING 2:HAVE_METADATA 3.HAVE_CURRENT_DATA 4.HAVE_FUTURE_DATA 5.HAVE_ENOUGH_DATA  
  16.    Media.seeking; //是否正在seeking  
  17.   
  18. //回放状态  
  19.    Media.currentTime value; //当前播放的位置,赋值可改变位置  
  20.    Media.startTime; //一般为0,如果为流媒体或者不从0开始的资源,则不为0  
  21.    Media.duration; //当前资源长度 流返回无限  
  22.    Media.paused; //是否暂停  
  23.    Media.defaultPlaybackRate value;//默认的回放速度,可以设置  
  24.    Media.playbackRate value;//当前播放速度,设置后马上改变  
  25.    Media.played; //返回已经播放的区域,TimeRanges,关于此对象见下文  
  26.    Media.seekable; //返回可以seek的区域 TimeRanges  
  27.    Media.ended; //是否结束  
  28.    Media.autoPlay;  //是否自动播放  
  29.    Media.loop;  //是否循环播放  
  30.    Media.play();    //播放  
  31.    Media.pause();   //暂停  
  32.   
  33. //控制  
  34.    Media.controls;//是否有默认控制条  
  35.    Media.volume value; //音量  
  36.    Media.muted value; //静音  
  37.   
  38.    //TimeRanges(区域)对象  
  39.    TimeRanges.length; //区域段数  
  40.    TimeRanges.start(index) //第index段区域的开始位置  
  41.    TimeRanges.end(index) //第index段区域的结束位置  

事件:

Js代码 
  1.        eventTester function(e){  
  2.     Media.addEventListener(e,function(){  
  3.         console.log((new Date()).getTime(),e);  
  4.     });  
  5.  
  6.   
  7. eventTester(“loadstart”);   //客户端开始请求数据  
  8. eventTester(“progress”);    //客户端正在请求数据  
  9. eventTester(“suspend”);     //延迟下载  
  10. eventTester(“abort”);       //客户端主动终止下载(不是因为错误引起),  
  11. eventTester(“error”);       //请求数据时遇到错误  
  12. eventTester(“stalled”);     //网速失速  
  13. eventTester(“play”);        //play()和autoplay开始播放时触发  
  14. eventTester(“pause”);       //pause()触发  
  15. eventTester(“loadedmetadata”);  //成功获取资源长度  
  16. eventTester(“loadeddata”);  //  
  17. eventTester(“waiting”);     //等待数据,并非错误  
  18. eventTester(“playing”);     //开始回放  
  19. eventTester(“canplay”);     //可以播放,但中途可能因为加载而暂停  
  20. eventTester(“canplaythrough”); //可以播放,歌曲全部加载完毕  
  21. eventTester(“seeking”);     //寻找中  
  22. eventTester(“seeked”);      //寻找完毕  
  23. eventTester(“timeupdate”);  //播放时间改变  
  24. eventTester(“ended”);       //播放结束  
  25. eventTester(“ratechange”);  //播放速率改变  
  26. eventTester(“durationchange”);  //资源长度改变  
  27. eventTester(“volumechange”);    //音量改变  



================================

在以前,网页没有显示视频的一个标准,所以基本都要借助插件来实现视频的播放,插件过多或者插件自身问题,很容易引起浏览器的假死,造成用户体验不佳。html5  video标签的出现改变了这一局面,可以让用户在不用安装任何插件的情况下轻松的观看视频。

  vedio和audio的使用技巧基本相同,本文仅以vedio作示例。先引用一段别人介绍的vedio标签


 

  大多数用户已经安装了Flash插件(事实上,大概95%的上网用户都装有Flash的某个版本),但HTML 5的支持者正在推动一个开放的,不需要任何插件的视频标准。这就是HTML 5的新标签<video>带来的构想,他提供了一个嵌入视频(以及与其交互)而不需要类似Flash的私有插件的方法。 
  不幸的是,视频并非那么简单。不仅仅是浏览器需要理解<video>标签,而且需要一个必要的编码译码器来播放视频。明显的解决方法只能是HTML 5规范的缔造者们选择一个视频编码译码器,并且让每一个浏览器制造商执行。 
  总之,这就是所推荐的打算。同时,这也是引起混乱的导火索。对于各种各样编码译码器的争论就已经很烦杂了,但更悲剧的事情是,浏览器制造商们还不能就此达成统一。苹果不愿意使用提议的Ogg Theora编码译码器,但Opera和Mozilla也不愿意支付由于他们的浏览器装载H.264编码译码器而造成的许可费用。Google同时支持两者,微软面对争论,远远的置身事外,因为他现在根本没有计划去支持HTML 5的视频元素。 面对浏览器制造商的僵持局面,HTML 5善意的独裁者Ian Hickson甩了甩他的手并说到去他妈的。所以HTML 5规范中没有特别指名或规定的视频编码解码器。”好吧,引用到这儿。 如今的情况是,微软终于陷进去了,但很悲剧的是,在IE 9中只支持H.264。同时,Googe终于在I/O大会上发布了开源的视频封装格式webM和视频编码格式VP8。Opera、Mozilla、Chrome宣布将完全支持VP8,IE宣布部分支持(需要装一个插件,但如果我没记错的话,HTML 5的一个愿景就是脱离浏览器插件,微软真是让人觉得悲剧)。 苹果决定不支持VP8,乔布斯认为VP8在质量或效率方面不如H.264,不能满足其产品的要求。另外最新消息表明VP8还有可能牵扯到专利的问题(如果真的侵犯专利的话,Opera和Firefox估计马上会无视VP8的)。 说了这么多,其实说到底就是,现在如果要在页面中使用video标签,需要考虑三种情况,支持Ogg Theora或者VP8(如果这玩意儿没出事的话)的(Opera、Mozilla、Chrome),支持H.264的(Safari、IE 9、Chrome),都不支持的(IE6、7、8)。好吧,现在让我们从技术层面来认识HTML 5的视频,包括video标签的使用,视频对象可以用到的媒介属性和方法,以及媒介事件。 


我们来看看video标签具体是怎么使用的以及它有哪些属性和方法。

使用方法:

 <video width="320" height="240" controls="controls">
  <source src="movie.ogg" type="video/ogg">
  <source src="movie.mp4" type="video/mp4">
Your browser does not support the video tag.
</video>

 

各浏览器目前对html5视频格式的支持:

浏览器 | 影音格式Ogg TheoraMP4(H.264)WebM
Microsoft Internet Explorer9××
Mozilla Firefox5+×
Google Chrome13+
Apple Safari5+××
Opera11+×

 

 

 

 

 

属性列表:

属性

描述

autoplayautoplay如果出现该属性,则视频在就绪后马上播放。默认为false
controlscontrols如果出现该属性,则向用户显示控件,比如播放按钮。这些控件是由浏览器来提供的,样式也可能因为不同浏览器而不一样
heightpixels设置视频播放器的高度。
looploop如果出现该属性,则当媒介文件完成播放后再次开始播放。
preloadnone、metadata、auto

如果出现该属性,则视频在页面加载时进行加载,并预备播放。如果使用"autoplay",则忽略该属性。

  • auto - 当页面加载后载入整个视频

  • meta - 部分预加载。使用此属性值,代表页面制作者认为用户不期望此视频,但为用户提供一些元数据(包括尺寸,第一帧,曲目列表,持续时间等等) 

  • none - 不进行预加载。使用此属性值,可能是页面制作者认为用户不期望此视频,或者减少HTTP请求

srcurl要播放的视频的URL。
 poster url 预览图

  媒介属性 

  一般用于js操作

属性可读状态描述
error只读

使用media.error返回一个MediaError对象表明当前的错误状态,如果没有出错,返回null,共有4个可能值。

  • MEDIA_ERR_ABORTED(数字值为1):媒体资源获取异常;
  • MEDIA_ERR_NETWORK(数字值为2):网络错误;
  • MEDIA_ERR_DECODE(数字值为3):媒体解码错误;
  • MEDIA_ERR_SRC_NOT_SUPPORTED(数字值为4):视频格式被不支持。
currentSrc只读返回该媒介标签的src属性值
networkState 只读返回媒介的网络状态,共有4个可能值。
  • NETWORK_EMPTY(数字值为0):尚未初始化;
  • NETWORK_IDLE(数字值为1):加载完成,网络空闲;
  • NETWORK_LOADING(数字值为2):视频加载中;
  • NETWORK_NO_SOURCE(数字值为3):加载失败。
 preload 可读写 可获取或改变媒介标签的preload属性值
 buffered 只读 返回一个TimeRanges对象,确认浏览器已缓存媒介文件
 readyState 只读 

返回媒介当前播放位置的就绪状态,共有5个可能值。

  • HAVE_NOTHING(数字值为0):当前播放位置无有效媒介资源;
  • HAVE_METADATA(数字值为1):加载中,媒介资源确认存在,但当前位置没有能够加载到有效媒介数据进行播放;
  • HAVE_CURRENT_DATA(数字值为2):已获取到当前播放数据,但没有足够的数据进行播放;
  • HAVE_FUTURE_DATA(数字值为3):已获取到后续播放数据,可以进行播放;
  • HAVE_ENOUGH_DATA(数字值为4):可以进行播放,且浏览器确认媒体数据以某一种速度进行加载,可以保证有足够的后续数据进行播放,而不会使浏览器的播放进度赶上加载数据的末端。
 seeking 只读 返回一个布尔值,表明浏览器是否正在请求数据,ture表示浏览器正在请求数据,false表示浏览器已停止请求。
 seekable 只读发挥一个TimeRanges对象,表明可以对当前媒介资源进行请求。
 currentTime 可读写 获取或改变视频的播放位置。单位为秒
 startTime 只读 返回媒介文件播放的开始时间,通常为0
 duration 只读 返回媒介文件总的播放时长
 played 只读 返回一个TimeRanges对象,标明浏览器已播放的媒介资源范围
paused只读返回一个布尔值,表明媒介是否暂停播放,ture表示媒介暂停播放,false表示媒介正在播放。
ended只读返回一个布尔值,表明媒介是否已结束,ture表示媒介已经播放完毕,false表示还未播放完毕。
defaultPlaybackRate可读写返回媒介默认的播放速率,或对其赋值,改变媒介的默认播放速率。
playbackRate可读写返回当前的媒介播放速率,或对其赋值,改变当前的媒介播放速率
autoplay可读写返回一个布尔值,表明当前媒介是否设置了自动播放,ture表示当前媒介为自动播放,false表示非自动播放,或对其赋值,设置是否自动播放。
loop可读写返回一个布尔值,表明当前媒介是否设置了循环播放,ture表示当前媒介设置了循环播放,false表示没有设置循环播放,或对其赋值,设置是否循环播放。
controls可读写返回一个布尔值,表明当前媒介是否使用了浏览器默认的播放控制栏,ture表示加载了,false表示没有加载,或对其赋值,设置是否使用浏览器默认的播放控制栏
 volume可读写返回当前媒介的音量值,或对其赋值,改变媒介的播放音量,范围为0到1,0相当于静音,1为最大音量。
 muted可读写返回一个布尔值,表明当前媒介播放是否开启静音,ture表示没有开启静音,false表示静音,或对其赋值,设置播放是否静音。

 

 

 很简单,那我们来做一个demo。(很奇怪,chrome拖动进度条到最后视频有几率就死掉,自动播放到最后没有问题,这是bug?还是我自己的问题?)

 

代码如下:

<!DOCTYPE html>
<html>
    <head>
        <title>html5 视频标签学习</title>
        <meta http-equiv="Content-Type" content="text/html;charset=utf-8;">
    </head>
    <body>
        
        <header>
            <h1>自定义视频播放器</h1>
            <div >
                当前播放 :《<span id="currentMovie">movie1</span><br>
                当前播放速度 : <span id="currentSpeed">1X</span><br>
                当前声音大小为 :<span id="currentVolume">100</span><br>
            </div>
        </header>
        <section>
        <article>
            <video style="float:left;" id="testVideo" preload="metadata" src="movie.ogg" height="300"  controls>
                你的浏览器不支持html5视频
            </video>
            <div style="float:left;margin-left:10px;">
                <h3>播放列表</h3>
                <ul>
                    <li><a>movie1</a></li>
                    <li><a>movie2</a></li>
                    <li><a>movie3</a></li>
                    <li><a>movie4</a></li>
                </ul>
            </div>
        </article>
        <article style="clear:both;">
            <br/>
            <button id="play">播放</button>
            <button id="pause">暂停</button>
            <button id="stop">停止</button>
            <button id="prev">前一个</button>
            <button id="next">后一个</button>
            <button id="upVolume">音量+</button>
            <button id="downVolume">音量-</button>
            <button id="fastFoward">快进</button>
            <button id="fastBackward">快退</button>
            <br/><input type="text" id="min" style="width:20px;" value="0"/>分跳转到<input type="text" id="sec"  style="width:20px;" value="0"/>播放 
            <button id="locate">确认</button>
        </article>
        <section>
        <script type="text/javascript">
            var $  = function(id){return document.getElementById(id);};
            var _video = $("testVideo");
            
            //视频列表
       var playList = {
                current : 0,
                list : ["movie.ogg","war3.ogg","movie.ogv","trailer.webm","trailer.ogv"]
            }
            
            var videoUtil = {
                //播放
                play : function(){
                    _video.play();
                },
                //暂停
                pause : function(){
                    _video.pause();
                },
                //停止
                stop : function(){
                    _video.currentTime = 0;
                    _video.pause();
                },
                //下一个视频
                next : function(){
                    if(playList.current == playList.list.length-1){
                        playList.current = 0;
                    }else{
                        playList.current++;
                    }
                    _video.src=playList.list[playList.current];
                    _video.play();
                },
                //前一个视频
                prev : function(){
                    if(playList.current == 0){
                        playList.current = palyList.list.length-1;
                    }else{
                        playList.current--;
                    }
                    _video.src=playList.list[playList.current];
                    _video.play();
                },
                //加大声音,每次加大1/10
                upVolume : function(){
                    _video.volume += 0.1;
                },
                //减小声音,每次减小1/10
                downVolume : function(){
                    _video.volume -= 0.1;
                },
                //翻倍加快播放速度
                fastFoward : function(){
                    //FF不支持playbackRate
            if(_video.playbackRate){
                        _video.playbackRate = _video.playbackRate*2;
                    }else{
                        alert("对不起,你的浏览器不支持改变播放速度!");
                    }
                    
                },
                //降低播放速度
                fastBackward : function(){
                    if(_video.playbackRate){
                        _video.playbackRate = _video.playbackRate/2;
                    }else{
                        alert("对不起,你的浏览器不支持改变播放速度!");
                    }
                },
                //跳转到指定时间点播放
                locate : function(){
                    var min = $("min").value;
                    var sec = $("sec").value;
                    var time = parseInt(min)*60+parseInt(sec);
                    _video.currentTime = time;
                    _video.play();
                },
                bindEvent : function(){
                    var self = this;
                    
                    //绑定页面上各个按钮的事件
            var btns = document.getElementsByTagName("button");
                    for(var i = 0 ;i < btns.length ; i++){
                        var el = btns[i];
                        el.onclick = self[el.id];
                    }
                    
                    //播放完毕自动播放下一个
                    _video.onended = function(){
                         var event = document.createEvent("HTMLEvents");
                        event.initEvent('click', true, true);
                        $("next").dispatchEvent(event);
                    }
                    
                    //循环检查视频的当前状态
                    setInterval(function(){
                        var speed = _video.playbackRate||1;
                        var movie = "movie"+playList.current;
                        var volume = parseInt(_video.volume*100);
                        $("currentMovie").innerHTML = movie;
                        $("currentSpeed").innerHTML = speed+"X";
                        $("currentVolume").innerHTML = volume;
                    },200);
                    
                }
            };
            
            window.onload = function(){
                videoUtil.bindEvent();
            }
            
        </script>
    </body>
</html>
复制代码