video-audio

HTML5新特性——视频播放

  HTML5提供了一个新的标签<video>标签,用于播放视频。该标签默认是一个300*150的inline-block。使用方法:

       <video src="x.mp4"></video>

       <video>

              <source src="x.mp4">

              <source src="x.ogg">

              <source src="x.webm">

       </video>

  VIDEO元素/对象的属性:

  (1)src:指定要播放的视频的资源路径

  (2)autoplay:false,是否自动播放

  (3)controls:false,是否显示播放控件,提示:不同浏览器的播放控件外观不同

  (4)currentTime:0,当前播放的时间点(s)

  (5)duration:60,影片总时长(s)

  (6)ended:false,是否播放到结尾

  (7)loop:false,是否循环播放

  (8)muted:false,是否静音

  (9)volume:1,音量设置(0~1),对象属性,不用于标签

  (10)paused:当前是否处于暂停状态

  (11)poster:'',指定视频第一帧播放前的电影海报

  (12)preload:指定视频预加载方案,可取值:

              auto:默认值,自动预加载视频的宽高、时长、第一帧内容、并缓冲了一定的时长

              metadata:元数据,只预加载视频的宽高、时长、第一帧内容

              none:不预加载任何内容

  VIDEO对象的方法:

  play():开始播放

  pause():暂停播放

  VIDEO对象的事件:

  onplay:视频开始播放(可能多种原因引起)

  onpause:视频开始暂停(可能多种原因引起)

  onplaying:

 

HTML5新特性——音频播放

  HTML5提供了一个新的标签<audio>标签,用于播放音频。该标签若没有controls属性,则默认display:none;反之则是一个300*30的inline-block。使用方法:

       <audio src="x.mp3"></audio>

       <audio>

              <source src="x.mp3">

              <source src="x.ogg">

              <source src="x.wav">

       </audio>

  AUDIO元素/对象的属性:

  (1)src:指定要播放的视频的资源路径

  (2)autoplay:false,是否自动播放

  (3)controls:false,是否显示播放控件,提示:不同浏览器的播放控件外观不同

  (4)currentTime:0,当前播放的时间点(s)

  (5)duration:60,影片总时长(s)

  (6)ended:false,是否播放到结尾

  (7)loop:false,是否循环播放

  (8)muted:false,是否静音

  (9)volume:1,音量设置(0~1),对象属性,不用于标签

  (10)paused:当前是否处于暂停状态

  (12)preload:指定视频预加载方案,可取值:

              auto:默认值,自动预加载视频的宽高、时长、第一帧内容、并缓冲了一定的时长

              metadata:元数据,只预加载视频的宽高、时长、第一帧内容

              none:不预加载任何内容

  AUDIO对象的方法:

  play():开始播放

  pause():暂停播放

  AUDIO对象的事件:

  onplay:视频开始播放(可能多种原因引起)

  onpause:视频开始暂停(可能多种原因引起)

  onplaying:

posted @ 2017-08-16 19:52  追忆枉然  阅读(197)  评论(0编辑  收藏  举报