孙肖宁

Html5中的多媒体
在HTML5之前,在网页上播放音频/视频的通用方法是利用Flash来播放,但是大多情况下,并非所有用户的浏览器都安...
扫描右侧二维码阅读全文
20
2018/05

Html5中的多媒体

在HTML5之前,在网页上播放音频/视频的通用方法是利用Flash来播放,但是大多情况下,并非所有用户的浏览器都安装了Flash插件,由此使得处理音频/视频播放变的非常复杂,并且移动设备的浏览器并不支持Flash插件。

音频

HTML5通过<audio>标签来解决音频播放的问题。

属性:
autoplay 自动播放
controls 是否显不默认播放控件
loop 循环播放
preload 预加载 同时设置autoplay时些属性失效
由于版权等原因,不同的浏览器可支持播放的格式是不一样的,具体如下。

音频格式ChromeFirefoxIE9OperaSafari
OGG支持支持支持支持不支持
MP3支持不支持支持不支持支持
WAV不支持支持不支持支持不支持

推荐的兼容写法

    <audio controls loop>
        <source src="music/yinyue.mp3"/>
        <source src="music/yinyue.ogg"/>
        <source src="music/yinyue.wav"/>
        抱歉,你的浏览器不支持音频标签!
    </audio>

视频

HTML5通过<video>标签来解决音频播放的问题。
属性:
autoplay 自动播放
controls 是否显示默认播放控件
loop 循环播放
preload 预加载,同时设置了autoplay,此属性将失效
width 设置播放窗口宽度
height 设置播放窗口的高度

由于版权等原因,不同的浏览器可支持播放的格式是不一样的,具体如下

格式IEFirefoxOperaChromeSafari
OggNo3.5+10.5+5.0+No
MPEG 49.0+NoNo5.0+3.0+
WebMNo4.0+10.6+6.0+No

推荐的兼容写法

    <video controls autoplay>
        <source src="video/movie.mp4"/>
        <source src="video/movie.ogg"/>
        <source src="video/movie.webm"/>
        抱歉,浏览器要换了!
    </video>

方法:load() 加载、play() 播放、pause() 暂停
属性:

  • currentTime 视频播放的当前进度、
  • duration:视频的总时间
  • paused:视频播放的状态.

事件:

  • oncanplay: 事件在用户可以开始播放视频/音频(audio/video)时触发。
  • ontimeupdate:通过该事件来报告当前的播放进度.
  • onended:播放完时触发

    全屏:video.webkitRequestFullScreen();

Last modification:July 12th, 2018 at 11:52 am
If you think my article is useful to you, please feel free to appreciate

Leave a Comment