「DOM 编程」多媒体(视频与音频)

2018-10-11  本文已影响0人  Rella7

多媒体

HTML5 前的多媒体需要借助第三方插件,例如 Flash,但是 HTML5 将网页中的多媒体带入了新的一章。

mutimedia.jpg

基本用法

// 音频
// 指定资源类型可以帮助浏览器更快的定位解码
<audio autobuffer autoloop loop controls>
  <source src="/media/audio.mp3" type="audio/mpeg">
  <source src="/media/audio.oga">
  <source src="/media/audio.wav">
  <object type="audio/x-wav" data="/media/audio.wav" width="290" height="45">
    <param name="src" value="/media/audio.wav">
    <param name="autoplay" value="false">
    <param name="autoStart" value="0">
    <p><a href="/media/audio.wav">Download this audio file.</a></p>
  </object>
</audio>

// 视频
<video autobuffer autoloop loop controls width=320 height=240>
  <source src="/media/video.oga">
  <source src="/media/video.m4v">
  <object type="video/ogg" data="/media/video.oga" width="320" height="240">
  <param name="src" value="/media/video.oga">
  <param name="autoplay" value="false">
  <param name="autoStart" value="0">
  <p><a href="/media/video.oga">Download this video file.</a></p>
  </object>
</video>

多媒体支持类型

HTML5 支持音频列表

HTML5 支持视频列表

多媒体格式兼容

测试音频兼容性。

var a = new Audio();
// 检测媒体类型返回
// 支持 - 'maybe' 或 'probably'
// 不支持 - ''
a.canPlayType('audio/nav');

HTML 属性

视频与音频的大部分属性和方法几乎相同。

属性 是否必须 默认值 备注
src 音频文件地址 URL
controls false 显示控件
autoplay false 音频就绪后自动播放
preload none 可取值为 none、metadata、auto。音频在页面加载是进行加载,并预备播放。如果使用 autoplay 则忽略该属性(该属性失效)
loop false 是否循环播放

控制多媒体

方法

属性

多媒体相关事件

全部事件列表

事件列表

Web Audio API

音频 W3C 官网定义在这里

Mozilla 官方音频教程在,以及第三方教程 1教程 2

上一篇 下一篇

猜你喜欢

热点阅读