HTML5与CSS3基础教程-第17章 视频、音频和其他多媒体

《HTML5与CSS3基础教程（第8版）》 第17章读书笔记

• 2020/04/05
• 数字版权管理（DRM）： H5并没有提供任何保护媒体内容的方法。因此，如果很在意对媒体文件的保护，不要使用H5的原生多媒体。（p350）

H5视频

（p350 - 358）

• 格式： H5支持3种视频文件格式：（p350 - 351）

  格式	拓展名	浏览器支持
  Ogg Theora	.ogv	Firefox 3.5+、Chrome 4+、Opera 10.5+、Android Firefox
  MP4（H.264）	.mp4, .m4v	Safari 3.2+、Chrome 4-？、IE9+、IOS Safari、 Android2.1+、Android Chrome/Firefox/Opera 11+
  WebM	.webm	Firefox 4+、Chrome 6+、Opera 10.6+、Android2.3+、Android Chrome/Firefox/Opera 14

  • 开发者至少需要为视频提供2中格式（MP4和WebM），才能确保获得所有兼容H5的浏览器支持。
  • 如果用户的机器上面安装了WebM，那么WebM在IE9+或Safari中可以正常运行。

• video元素加载视频：

  <video src="vidoe-url"></video>
  

• video元素属性： （p352）

  属性	描述
  src	指定视频文件的URL
  autoplay	当视频可以播放时立即开始播放（自动播放）
  controls	添加浏览器为视频设置的默认控件
  muted	让视频静音
  loop	让视频循环播放
  poster	指定视频加载时要显示的图像。接受所需图像的URL
  width	视频的宽度，通常默认为300px
  height	视频的高度，通常默认为150px
  preload	预加载，告诉浏览器要加载的视频内容的多少。可以取值none/metadata/auto（默认）

  • 如果没有设置宽高，则浏览器会计算视频的尺寸，并在加载文件后根据尺寸显示视频。若设置的尺寸与视频不符，浏览器会对视频进行缩放，并尽可能保证质量。（p351）

  • 如果没有指定controls属性，就不可以通过浏览器操控视频的播放，只能是默认的播放方法；若也没有设置autoplay和poster，则视频会停在第一帧且没有播放、暂停等按钮（即不能播放）若设置了autoplay和loop，没有control则不能停下视频。

  • 不同浏览器的controls控件是不同的，见p353.（Firefox的控件显示的视频时长会比其他浏览器长1秒，音频也是）

  • 如果没有设置poster属性， 视频加载时显示的图像则是视频的第一帧，设置后显示的是poster的url值的图片。

  • preload可以取3个值：

    • none：表示不加载任何视频（若认为用户观看视频的可能性比较低，或不是主页内容时，可以不预加载该视频，或使用metadata）；
    • metadata：表示仅加载视频元数据（如宽高、长度等）；
    • auto：默认值，表示让浏览器决定怎么做。

  • 当video元素中没有浏览器可以识别/支持的源时， 可能会显示视频的控制条（如果设置了controls属性），或者显示空白矩形区域（大多数情况），或显示海报（如果设置了poster属性）。

• 使用多种来源的视频和备用文本： （p356 - 358）

  之前一个video元素只能包含一个视频源，当为了视频多种浏览器时，就需要指定不同格式的视频，并为不支持H5原生视频的浏览器准备备用文本（如视频下载链接等）。就可以只用<source>元素：

  <video controls>
  	<source src="video-1-url" type="video/mp4">
      <source src="video-2-url" type="video/webm">
      <!-- 不支持H5原生视频的浏览器准备备用文本（如视频下载链接等） -->
      <p>
          <a href="video-1-url">Download video!</a>
      </p>
  </video>
  

  • video元素中不需要指定src属性。
  • 浏览器发现video元素时， 首先会检查元素本身是否有src，若没有，则会逐个检查source元素，直到找到它可以播放的一个源，并忽略后面的源。 不能识别video元素的浏览器会忽略上述，只加载可以认识的部分，比如备用文本（如果有的话）。

• source的属性： （p357）

  名称	描述
  src	视频来源的url。
  type	用于指定视频的类型，帮助浏览器决定它是否能够播放该视频。
  media	用于为视频的来源指定CSS3查询，从而可以在不同尺寸屏幕下显示不同尺寸的视频。

• 提供可访问性： （p358）

  • 原生多媒体可以更好地使用键盘进行控制。
  • JS Media API可以更好的控制视频。
  • H5还指定了一种新的文件格式WebVTT，用于包含文本字幕、标题、描述、篇章等视频内容。

H5音频

（p358 - 362）

• 格式： H5支持6种音频文件格式：（p350 - 351）

  格式	拓展名	浏览器支持
  Ogg Vorbis	.ogg	Firefox 3.5+、Chrome 5+、Opera 10.5+
  MP3	.mp3	Safari 5+、Chrome 6+、IE9+、IOS
  WAV	.wav	Firefox 3.6+、Chrome 8+、Safari 5+、Opera 10.5+
  ACC	.acc	Safari 3+、IE9+、IOS3+、Android 2+
  MP4	.mp4	Safari 3+、Chrome 5+、IE9+、IOS3+、Android 2+
  Opus	.opus	Firefox

  • 开发者至少需要为音频提供2中格式（Ogg Vorbis和MP3），才能确保获得所有兼容H5的浏览器支持。
  • MP4是一种视频编解码器，但是也可以仅对音频数据进行编码。
  • 若使用单个Ogg编码，则可以省略controls，因为他默认包含控件。

• audio元素加载音频：

  <audio src="audio-url"></audio>
  

• audio元素属性： （p360）

  类似video属性，只是没有width, height, poster。

  • 包含autoplay属性会覆盖preload属性的设置，因为只有加载音频文件才能播放；

  • preload属性的值不会影响浏览器行为，它只影响请求。

• 提供带备用内容的多个视频源：

  类似使用多种来源的视频和备用文本。（p361 - 362）

具有Flash的视频和音频

（p362 - 366）

• 使用MediaElement.js嵌入Flash：

  1. 下载MediaElement.js并解压；

  2. 将build文件夹内容复制到项目文件夹，并在html中引用里面的jquery.js, mediaelement-and-player.min.js, mediaelementplayer.min.css；

  3. 像H5使用video, audio一样使用他们；

  4. 添加js代码：

     $('video', 'audio').mediaelementplayer();
     

  • 添加上述代码后，无论使用什么浏览器、无论浏览器是否支持H5多媒体，视频的播放控件看起来都是一样的。
  • 不支持H5元素多媒体的浏览器，只要用户安装了Flash，也可以播放多媒体文件。
  • 其他的Flash播放器解决方案包括：
    • Video.js
    • JW Player（免费版有水印）
    • Flowplayer（免费版有水印）

高级多媒体

（p366）

• 通过canvas操作视频
• 联合使用SVG和视频