html5:音频、视频和其他多媒体

  • 视频文件格式

  html5支持三种视频文件格式(即编解码器):.ogg  .mp4或.m4v   .webm 。 编解码器是使用压缩算法对数据的数字流进行编码和解码,使之更适合播放的计算机程序。在有的浏览器中如果没有正确地设置MIME类型,媒体文件就不会播放。

  要获得所有兼容html5浏览器对媒体播放的支持,需要至少提供两种格式的视频:mp4  和 webm。

  将以下文本添加到后缀名为.htaccess(或其他)文件中设置MIME类型:

  AddType video/ogg .ogv

  AddType video/mp4 .mp4

  AddType video/webm .webm

  AddType audio/ogg .ogg

  AddType audio/mp3 .mp3

  • 添加单个视频

  <video src="" width=""  heigth="" autoplay  muted controls loop poster preload> </video>

  属性介绍:

    autoplay -- 自动播放

    muted -- 是否静音播放

    controls --  添加浏览器为视频设置的默认控件

    poster -- url值,指定视频加载时要显示的图像,(而不显示视频的第一帧)

    preload -- 告诉浏览器要加载的视频内容的多少。none---不加载任何值,metadata表示仅加载视频的元数据,auto表示让浏览器决定怎么做。

  • 为一个媒体文件指定多个来源,确保获得所有浏览器的支持

    通过source元素实现,在videl标签中可以添加多个source元素,用来指定媒体文件的来源

    

<video  controls  muted  autoplay  preload="none" loop>
    <source  src="mp4filesource.mp4">
    <source src="webmfilesource.webm">
   <p><a href="">旧浏览器显示p元素中的文本</a></p>
</video>

  source元素的属性有:

    type:用于指定视频的类型,帮助浏览器决定它是否能够播放该视频

    media:用于为视频来源指定css3媒体查询,从而可以为不同屏幕尺寸的设备指定不同的视频播放。

  • 音频文件格式

   常用的是ogg 和 mp3。

   1)  添加单个格式的音频文件  

      <auto  src=""   autoplay  controls  loop muted preload>

    2)添加多个格式的音频文件

      如同视频文件,使用source元素

      <audio>

        <source src="" type=""  media="">

      </audio>

  

posted @ 2018-03-19 15:30  LittleGirl_MyBaby  阅读(296)  评论(0编辑  收藏  举报