五、<video>标签的使用

<video>标签为html5新增标签。在广东互联网协会官网项目中,首页引入了一次此标签,使用了preload属性以及webkit-playsinline属性。首次使用<video>实践真实项目,所以我想根据w3school上对该标签的描述,对其进行一次使用方法的总结。


使用video标签
  1. <video>标签(<audio>与之基本相同)
    基本用法:
<video src="movie.mp4" controls="controls">   
  您的浏览器不支持 video 标签。出不支持该标签的信息。
</video>

可以在开始标签和结束标签之间放置文本内容,这样老的浏览器就可以显示出不支持该标签的信息。
兼容问题:Internet Explorer 9+, Firefox, Opera, Chrome 以及 Safari 支持 <video> 标签。

属性:

1、autoplay: 自动播放,如果出现该属性,则视频/音频在就绪后马上播放。
2、preload: 预加载,如果出现该属性,则视频/音频在页面加载时进行加载,并预备播放。如果使用 "autoplay",则忽略该属性。
3、controls: 显示播放控件,如果出现该属性,则向用户显示视频/音频控件,比如播放按钮。
4、loop: 视频/音频循环播放
5、poster: 值为一个url,规定视频下载时显示的图像,或者在用户点击播放按钮前显示的图像。
6、muted:静音
7、src:要播放的视频/音频的 URL。
8、width与height: 设置视频播放器的宽高。

2、<source>标签

<source> 标签用于规定可替换的视频/音频文件,供浏览器根据它对媒体类型或者编解码器的支持进行选择

例如:

<audio controls>
   <source src="horse.ogg" type="audio/ogg">
   <source src="horse.mp3" type="audio/mpeg">
   您的浏览器不支持audio标签
</audio> 

3、ios端不自动全屏播放

<video src="1.mp4" webkit-playsinline playsinline x5-playsinline x-webkit-airplay="allow"></video>
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容

  • 1、作用: 播放视频 标签定义视频,比如电影片段或其他视频流。 2、第一种格式: 3、video标签的属性 sr...
    一Left一阅读 1,894评论 0 3
  • 浏览器与服务器的基本概念 浏览器(安装在电脑里面的一个软件) 作用: ①将网页内容渲染呈现给用户查看。 ②让用户通...
    云还灬阅读 1,154评论 0 0
  • 教练技术,它是一个这样的课程: 教练技术让你更从容淡定地面对生活和压力。 教练技术让你更明确自己的目标...
    冯江山阅读 1,324评论 0 1
  • 送给儿子的十句老生常谈: 1, 制定目标时,要强化人生中最神秘、最激动人心的部分。 毕加索:一旦你真弄清楚了什么是...
    马唐阅读 352评论 0 1