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

本文详细介绍了HTML5中的视频和音频应用,包括支持的格式、video与audio元素的使用方法、属性详解及跨浏览器兼容策略。同时,探讨了如何提供多种视频源和备用文本以增强用户体验。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

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

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

H5视频

(p350 - 358)

  • 格式: H5支持3种视频文件格式:(p350 - 351)

    格式拓展名浏览器支持
    Ogg Theora.ogvFirefox 3.5+、Chrome 4+、Opera 10.5+、Android Firefox
    MP4(H.264).mp4, .m4vSafari 3.2+、Chrome 4-?、IE9+、IOS Safari、 Android2.1+、Android Chrome/Firefox/Opera 11+
    WebM.webmFirefox 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属性,就不可以通过浏览器操控视频的播放,只能是默认的播放方法;若也没有设置autoplayposter,则视频会停在第一帧且没有播放、暂停等按钮(即不能播放)若设置了autoplayloop,没有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.oggFirefox 3.5+、Chrome 5+、Opera 10.5+
    MP3.mp3Safari 5+、Chrome 6+、IE9+、IOS
    WAV.wavFirefox 3.6+、Chrome 8+、Safari 5+、Opera 10.5+
    ACC.accSafari 3+、IE9+、IOS3+、Android 2+
    MP4.mp4Safari 3+、Chrome 5+、IE9+、IOS3+、Android 2+
    Opus.opusFirefox
    • 开发者至少需要为音频提供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播放器解决方案包括:

高级多媒体

(p366)

  • 通过canvas操作视频
  • 联合使用SVG和视频
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值