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

第17章 视频、音频和其他多媒体

本章内容

  • 第三方插件与步入原生
  • 视频文件格式
  • 在网页中添加单个视频
  • 为视频添加控件和自动播放
  • 为视频指定循环播放和海报图像
  • 阻止预加载视频
  • 使用多种来源的视频和备用文本
  • 提供可访问性
  • 音频文件格式
  • 为网页添加带控件的音频文件
  • 自动播放、循环和预加载音频
  • 提供带有备用设置的多种音频来源
  • 添加具有备用 Flash 的视频和音频
  • 高级多媒体
  • 更多资源

视频文件格式

在网页中添加单个视频

  • <video src="my-video.ext"></video> 在网页中添加单个视频
  • video属性：src（源）、autoplay（自动播放）、controls（控件）添加浏览器为视频设置的默认控件
    、muted（静音）、loop（循环）、poster（海报）指定视频加载时要显示的图像、width（宽度）、height（高度）、preload（预加载）（none表示不加载任何视频、metadata表示仅加载视频的元数据、auto让浏览器决定怎么做）。

为视频添加控件和自动播放

  • 添加 autoplay 和 controls

为视频指定循环播放和海报图像

  • 添加 loop 和 poster

阻止视频预加载

  • 添加 preload="none"

使用多种来源的视频和备用文本

  • source 元素用于定义一个以上的媒体元素
  • source 的属性有：src（来源）、type（类型）、media（CSS3媒体查询）
  • 可以在https://peach.blender.org/download/下载视频用于练习
<video width="369" height="208" controls>
	<source src="paddle-steamer.mp4" type="video/mp4">
	<source src="paddle-steamer.webm" type="video/webm">
	<!-- 旧浏览器的备用链接 -->
	<p><a href="paddle-steamer.mp4"> Download the video</a></p> 
</video>

音频文件格式

  • .ogg .mp3 .wav .aac .mp4 .opus

在网页中添加带控件的单个音频文件

  • <audio src="xx.ogg" controls></audio>
  • audio属性：src, autoplay, controls, muted, loop, preload.

添加具有备用 Flash 的视频和音频

高级多媒体

  • 可以通过canvas 操作视频
  • SVG（可缩放矢量图形）

更多资源

posted @ 2020-04-13 06:28  by-sknight  阅读(115)  评论(0)    收藏  举报