码迷,mamicode.com
首页 > Web开发 > 详细

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

时间:2018-03-19 16:55:58      阅读:252      评论:0      收藏:0      [点我收藏+]

标签:url   常用   nbsp   媒体查询   解码器   htaccess   文件   设备   width   

  • 视频文件格式

  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>

  

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

标签:url   常用   nbsp   媒体查询   解码器   htaccess   文件   设备   width   

原文地址:https://www.cnblogs.com/lingLongBaby/p/8602473.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!