video-01-详解使用和属性说明

简介: video-01-详解使用和属性说明

video标签可以通过简单的属性设置来进行视频播放,我们初学可以先做简单学习,但是高级操作就需要video对象来完成高阶玩法

目录



一、参考资料

1.1文档

HTML <video> 标签

1..2视频

详解video对象,看完必会,你也能写一个视频播放器(一)_哔哩哔哩_bilibili

详解video对象,看完必会,你也能写一个视频播放器(二)_哔哩哔哩_bilibili

详解video对象,看完必会,你也能写一个视频播放器(三)_哔哩哔哩_bilibili

详解video对象,看完必会,你也能写一个视频播放器(四)_哔哩哔哩_bilibili

二、简单使用

<video src="video.mp4" controls="controls">
您的浏览器不支持 video 标签。
</video>

三、标签属性

属性 描述
autoplay autoplay 如果出现该属性,则视频在就绪后马上播放。
controls controls 如果出现该属性,则向用户显示控件,比如播放按钮。
height pixels 设置视频播放器的高度。
loop loop 如果出现该属性,则当媒介文件完成播放后再次开始播放。
muted muted 规定视频的音频输出应该被静音。
poster URL 规定视频下载时显示的图像,或者在用户点击播放按钮前显示的图像。
preload preload

如果出现该属性,则视频在页面加载时进行加载,并预备播放。

如果使用 "autoplay",则忽略该属性。

src url 要播放的视频的 URL。
width pixels 设置视频播放器的宽度。

3.1使用案例

<video
  id="video" 
  src="video.mp4" /*视频地址*/
  controls = "true" /*是否显示播放控件*/
  poster="images.jpg" /*视频封面*/
  preload="auto" /*预加载*/
  webkit-playsinline="true" /*IOS中让视频在小窗内播放而不是全屏播放*/  
  playsinline="true" /*IOS微信浏览器支持小窗内播放*/ 
  x-webkit-airplay="allow" /*是否支持ios的AirPlay功能*/
  x5-video-player-type="h5" /*启用H5播放器,是wechat安卓版特性*/
  x5-video-player-fullscreen="true" /*设置为true防止横屏*/
  x5-video-orientation="portraint" /*播放器的方向,landscape横屏,portraint竖屏,默认值为竖屏*/
  style="object-fit:fill">
</video>
目录
相关文章
|
13天前
|
移动开发 编解码 UED
除了 `<audio>` 和 `<video>` 标签,HTML5 还支持哪些多媒体格式?
【10月更文挑战第19天】HTML5对多种多媒体格式的支持,为网页开发者提供了丰富的选择,能够更好地满足不同类型多媒体内容在网页中的展示和交互需求,提升了网页的用户体验和多媒体应用的多样性。
|
1月前
video和audio的事件
【10月更文挑战第5天】video和audio的事件。
35 4
|
6月前
|
JavaScript 前端开发
video-03-video事件汇总
video-03-video事件汇总
101 1
|
JavaScript
audio用法
之前老早之前写的 但不是markdown格式,总觉得不爽 这个记录下吧 都比较简单直接上代码吧
226 0
|
前端开发
video标签自动播放视频
video标签自动播放视频
371 0
|
JavaScript 前端开发
|
Web App开发 移动开发 JavaScript
|
移动开发 HTML5 Web App开发
HTML5音频audio属性
来源:https://segmentfault.com/a/1190000008932943?utm_source=tuicool&utm_medium=referral audio 的控制函数主要有: load() 加载音频、视频软件,通常不必调用,除非是动态生成的元素,用来在播放前预加载pla...
1223 0
|
Web App开发 移动开发 HTML5
【HTML5 video】video标签的部分属性解析
转自:http://www.cnblogs.com/kiter/archive/2013/02/25/2932157.html   现在如果要在页面中使用video标签,需要考虑三种情况,支持Ogg Theora或者VP8(如果这玩意儿没出事的话)的(Opera、Mozilla、Chrome),支持H.264的(Safari、IE 9、Chrome),都不支持的(IE6、7、8)。
1389 0