来自 计算机前端 2019-11-30 05:46 的文章
当前位置: 美高梅4858官方网站 > 计算机前端 > 正文

《HTML5》 奥迪(Audi卡塔尔国o/Video全解,《html5》audio

《HTML5》 Audio/Video全解,《html5》audio

一、标签解读

  • <audio> 标签属性

        <audio id="media" src="" controls></audio>  

src:音乐的URL (source标签在src属性不存在时使用) 
preload:预加载(none、metadata、auto。如果不使用此属性,默认为auto。)  
autoplay:自动播放 
loop:循环播放 
controls:浏览器自带的控制条

  • <video> 标签属性

美高梅4858官方网站,        <video id="media" src="" controls width="400px" height="400px"> </video> 

src:视频的URL 
poster:视频封面,没有播放时显示的图片 
preload:预加载 
autoplay:自动播放 
loop:循环播放 
controls:浏览器自带的控制条 
width:视频宽度 
height:视频高度 
muted:是否输出视频的声音  

 

一、标签解读

  • <audio> 标签属性

        <audio id="media" src="" controls></audio>  

src:音乐的URL (source标签在src属性不存在时使用) 
preload:预加载(none、metadata、auto。如果不使用此属性,默认为auto。)  
autoplay:自动播放 
loop:循环播放 
controls:浏览器自带的控制条
  • <video> 标签属性

        <video id="media" src="" controls width="400px" height="400px"> </video> 

src:视频的URL 
poster:视频封面,没有播放时显示的图片 
preload:预加载 
autoplay:自动播放 
loop:循环播放 
controls:浏览器自带的控制条 
width:视频宽度 
height:视频高度 
muted:是否输出视频的声音  

 

二、Media对象方法和属性

  • 获取HTMLVideoElement和HTMLAudioElement对象
  1. //audio可以直接通过new创建对象  

  2. Media = new Audio("");  

  3. //audio和video都可以通过标签获取对象  

  4. Media = document.getElementById("media");  

  • Media方法和属性——HTMLVideoElement 和 HTMLAudioElement 均继承自 HTMLMediaElement
  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. Media.controls;//是否有默认控制条  

  33. Media.volume = value; //音量  

  34. Media.muted = value; //静音  

  35.   

  36. //TimeRanges(区域)对象  

  37. TimeRanges.length; //区域段数  

  38. TimeRanges.start(index) //第index段区域的开始位置  

  39. TimeRanges.end(index) //第index段区域的结束位置 

二、Media对象方法和属性

  • 获取HTMLVideoElement和HTMLAudioElement对象
  • Media方法和属性——HTMLVideoElement 和 HTMLAudioElement 均继承自 HTMLMediaElement

三、Media JS事件

 

   eventTester = function(e){  
        Media.addEventListener(e,function(){  
            console.log((newDate()).getTime(),e);  
        });  
   }  
  
   eventTester("loadstart");   //客户端开始请求数据  
   eventTester("progress");    //客户端正在请求数据  
   eventTester("suspend");     //延迟下载  
   eventTester("abort");       //客户端主动终止下载(不是因为错误引起)  
   eventTester("error");       //请求数据时遇到错误  
   eventTester("stalled");     //网速失速  
   eventTester("play");        //play()和autoplay开始播放时触发  
   eventTester("pause");       //pause()触发  
   eventTester("loadedmetadata");  //成功获取资源长度  
   eventTester("loadeddata");  //  
   eventTester("waiting");     //等待数据,并非错误    
   eventTester("playing");     //开始回放  
   eventTester("canplay");     //可以播放,但中途可能因为加载而暂停  
   eventTester("canplaythrough"); //可以播放,歌曲全部加载完毕  
   eventTester("seeking");     //寻找中  
   eventTester("seeked");      //寻找完毕  
   eventTester("timeupdate");  //播放时间改变  
   eventTester("ended");       //播放结束   
   eventTester("ratechange");  //播放速率改变  
   eventTester("durationchange");  //资源长度改变
   eventTester("volumechange");    //音量改变

 

      事件详细说明:

美高梅4858官方网站 1

三、Media JS事件

 

   eventTester = function(e){  
        Media.addEventListener(e,function(){  
            console.log((newDate()).getTime(),e);  
        });  
   }  
  
   eventTester("loadstart");   //客户端开始请求数据  
   eventTester("progress");    //客户端正在请求数据  
   eventTester("suspend");     //延迟下载  
   eventTester("abort");       //客户端主动终止下载(不是因为错误引起)  
   eventTester("error");       //请求数据时遇到错误  
   eventTester("stalled");     //网速失速  
   eventTester("play");        //play()和autoplay开始播放时触发  
   eventTester("pause");       //pause()触发  
   eventTester("loadedmetadata");  //成功获取资源长度  
   eventTester("loadeddata");  //  
   eventTester("waiting");     //等待数据,并非错误    
   eventTester("playing");     //开始回放  
   eventTester("canplay");     //可以播放,但中途可能因为加载而暂停  
   eventTester("canplaythrough"); //可以播放,歌曲全部加载完毕  
   eventTester("seeking");     //寻找中  
   eventTester("seeked");      //寻找完毕  
   eventTester("timeupdate");  //播放时间改变  
   eventTester("ended");       //播放结束   
   eventTester("ratechange");  //播放速率改变  
   eventTester("durationchange");  //资源长度改变
   eventTester("volumechange");    //音量改变

 

      事件详细说明:

美高梅4858官方网站 2

四、浏览器对音视频格式支持说明

   Audio 
  Firefox:支持 Ogg Vorbis和WAV 
  Opera :支持Ogg Vorbis和WAV 
  Safari :支持MP3,AAC格式 ,和MP4 
  Chrome :支持Ogg Vorbis,MP3,WAV,AAC和MP4 
  Internet Explorer 9+ :支持MP3,AAC格式 ,和MP4 
  IOS :支持MP3,AAC格式 ,和MP4 
  Android :支持AAC和MP3 
  为了最大程度支持所有上面提到的浏览器,建议开发者使用Ogg Vorbis和MP3这两种格式例如。 

<audio controls>
   <source src="myAudio.ogg" type="audio/ogg">
   <source src="myAudio.mp3" type="audio/mp3">
</audio>

 

   Video 
  Firefox :支持Ogg Theora格式和WEBM 
  Opera :支持Ogg Theora格式和WEBM 
  Safari :支持MP4 
  Chrome :支持Ogg Theora格式,MP4和WEBM 
  Internet Explorer 9 :支持MP4和WEBM(需要安装插件) 
  IOS :支持MP4 
  Android :支持MP4和WEBM(Android 2.3版本以上) 
   为了支持上述所有的浏览器,建议使用WebM和MP4视频文件作为source元素。例如。

<video controls>
   <source src="myVideo.mp4" type="video/mp4">
   <source src="myVideo.webm" type="video/webm">
</video>

 

  再来张截图示意:(

美高梅4858官方网站 3 

 

四、浏览器对音视频格式支持说明

   Audio 
  Firefox:支持 Ogg Vorbis和WAV 
  Opera :支持Ogg Vorbis和WAV 
  Safari :支持MP3,AAC格式 ,和MP4 
  Chrome :支持Ogg Vorbis,MP3,WAV,AAC和MP4 
  Internet Explorer 9+ :支持MP3,AAC格式 ,和MP4 
  IOS :支持MP3,AAC格式 ,和MP4 
  Android :支持AAC和MP3 
  为了最大程度支持所有上面提到的浏览器,建议开发者使用Ogg Vorbis和MP3这两种格式例如。 

<audio controls>
   <source src="myAudio.ogg" type="audio/ogg">
   <source src="myAudio.mp3" type="audio/mp3">
</audio>

 

   Video 
  Firefox :支持Ogg Theora格式和WEBM 
  Opera :支持Ogg Theora格式和WEBM 
  Safari :支持MP4 
  Chrome :支持Ogg Theora格式,MP4和WEBM 
  Internet Explorer 9 :支持MP4和WEBM(需要安装插件) 
  IOS :支持MP4 
  Android :支持MP4和WEBM(Android 2.3版本以上) 
   为了支持上述所有的浏览器,建议使用WebM和MP4视频文件作为source元素。例如。

<video controls>
   <source src="myVideo.mp4" type="video/mp4">
   <source src="myVideo.webm" type="video/webm">
</video>

 

  再来张截图示意:(

美高梅4858官方网站 4 

 

 

 

五、疑难杂症

五、疑难杂症

  1、mp4格式视频无法在chrome中播放

  Chrome浏览器支持HTML5,它支持原生播放部分的MP4格式(不用通过Flash等插件)。
为什么是部分MP4呢?MP4有非常复杂的含义(见
  然后,我猜测问题的原因是这样的:Chrome浏览器见到MP4后缀的文件,使用了原生HTML5视频播放起播放,但却发现视频格式无法解码。对于Firefox,它不支持原生播放MP4,于是使用了Flash,绝大部分的视频格式基本都可通过Flash播放。
  这篇2011年1月的消息提到Google将放弃对H264的支持:
  为什么Chrome不支持所有的视频编码格式?绝大部份的视频编码格式都是要付版权费的,Google已经为H264买了单,Firefox没有Google那么有钱不愿意买。
  最后,我录制了一段教学视频,指导大家怎样把各种视频转换成兼容性比较好的MP4文件。视频中使用的软件是“格式工厂”
  ffmpeg -i infile.flv -vcodec libx264 o5.mp4
  如果转换出的视频在某些设备还是无法播放,可以试试利用MediaCoder转换兼容性更好的MP4

  1、mp4格式视频无法在chrome中播放

  Chrome浏览器支持HTML5,它支持原生播放部分的MP4格式(不用通过Flash等插件)。
为什么是部分MP4呢?MP4有非常复杂的含义(见
  然后,我猜测问题的原因是这样的:Chrome浏览器见到MP4后缀的文件,使用了原生HTML5视频播放起播放,但却发现视频格式无法解码。对于Firefox,它不支持原生播放MP4,于是使用了Flash,绝大部分的视频格式基本都可通过Flash播放。
  这篇2011年1月的消息提到Google将放弃对H264的支持:
  为什么Chrome不支持所有的视频编码格式?绝大部份的视频编码格式都是要付版权费的,Google已经为H264买了单,Firefox没有Google那么有钱不愿意买。
  最后,我录制了一段教学视频,指导大家怎样把各种视频转换成兼容性比较好的MP4文件。视频中使用的软件是“格式工厂”
  ffmpeg -i infile.flv -vcodec libx264 o5.mp4
  如果转换出的视频在某些设备还是无法播放,可以试试利用MediaCoder转换兼容性更好的MP4

  2、让服务器能正确识别多媒体的MIME类型

  即使对浏览器来说,已经设置了正确的媒体,但有可能是您的服务器并不能正确识别多媒体的MIME类型。MIME类型告诉服务器如何处理不同的文件类型。如果你使用Apache,则可以在.htaccess文件中添加下面的音频支持:
  AddType audio/ogg ogg AddType audio/ogg oga AddType audio/wav wav AddType audio/mpeg mp3 AddType audio/mp4 mp4 AddType audio/mp4 mpa
  类似地添加如下代码,以支持视频:
  AddType video/webm webm AddType video/mp4 mp4 AddType video/ogg ogg AddType video/ogg ogv
  如果不能访问服务器的.htaccess文件,则有可能在服务器的控制面板地方有一个选项,允许查看和添加MIME类型。
  如果是Windows服务器,那么可能需要在IIS或者web.config中进行设置在web.config文件中 。

  2、让服务器能正确识别多媒体的MIME类型

  即使对浏览器来说,已经设置了正确的媒体,但有可能是您的服务器并不能正确识别多媒体的MIME类型。MIME类型告诉服务器如何处理不同的文件类型。如果你使用Apache,则可以在.htaccess文件中添加下面的音频支持:
  AddType audio/ogg ogg AddType audio/ogg oga AddType audio/wav wav AddType audio/mpeg mp3 AddType audio/mp4 mp4 AddType audio/mp4 mpa
  类似地添加如下代码,以支持视频:
  AddType video/webm webm AddType video/mp4 mp4 AddType video/ogg ogg AddType video/ogg ogv
  如果不能访问服务器的.htaccess文件,则有可能在服务器的控制面板地方有一个选项,允许查看和添加MIME类型。
  如果是Windows服务器,那么可能需要在IIS或者web.config中进行设置在web.config文件中 。

  3、文件格式转换的问题

  一种很常见的情况是,用户从客户端提交给服务端一个类型的媒体文件,并且尽管你已经从它的文件扩展名中确认了其MIME类型。但是,该文件没有被正确解码。例如,它可以是一个完全有效的MP4文件,但由于某种原因,在一些浏览器中无法播放。如果发生这种情况,最好把用户上传的文件进行编码,比如使用如Miro Video Coverter和Media Converter等编码器,可以确保正确的编码。 
  此外,一些文件,尤其是MP4文件,在测试时,不要总是在一个支持其格式的浏览器中进行测试,这是因为事实上,MP4存在不同的编码格式,可以根据不同格式对MP4(又称如H.264)进行编码(参考: 
  如果需要支持Firefox 3.6和更低的版本,还需要转换对应的音频文件为Ogg格式},并将它们添加到中的元素中。

  3、文件格式转换的问题

  一种很常见的情况是,用户从客户端提交给服务端一个类型的媒体文件,并且尽管你已经从它的文件扩展名中确认了其MIME类型。但是,该文件没有被正确解码。例如,它可以是一个完全有效的MP4文件,但由于某种原因,在一些浏览器中无法播放。如果发生这种情况,最好把用户上传的文件进行编码,比如使用如Miro Video Coverter和Media Converter等编码器,可以确保正确的编码。 
  此外,一些文件,尤其是MP4文件,在测试时,不要总是在一个支持其格式的浏览器中进行测试,这是因为事实上,MP4存在不同的编码格式,可以根据不同格式对MP4(又称如H.264)进行编码(参考: 
  如果需要支持Firefox 3.6和更低的版本,还需要转换对应的音频文件为Ogg格式},并将它们添加到中的元素中。

  4、能否在MP4完整下载前进行播放?

  一般情况下,HTML5的的音频和视频播放器将允许用户在完整下载文件前,就可以开始进行播放了,有时候,对于MP4文件来说却不能这样,要必须等待所有的视频下载完毕再播放,这主要是编码问题造成的 
  有时,MP4文件使用索引进行了编码(其中包含了比如文件长度等信息),往往这些信息是放在文件的尾部而不是头部。索引信息中,包含了文件的元信息,浏览器根据这些元信息去进行下载。如果索引放在后面的话,则必须等待到获得整个文件的索引后,才能知道文件的元信息,所以就必须等到整个文件下载完毕才能开始播放了。 
  如果您遇到这种情况,还有一个简单的修补程序,是由埃里克森Renaun提供的,下载地址为:

本文由美高梅4858官方网站发布于计算机前端,转载请注明出处:《HTML5》 奥迪(Audi卡塔尔国o/Video全解,《html5》audio

关键词: