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>
目录
相关文章
|
1月前
|
移动开发 编解码 UED
除了 `<audio>` 和 `<video>` 标签,HTML5 还支持哪些多媒体格式?
【10月更文挑战第19天】HTML5对多种多媒体格式的支持,为网页开发者提供了丰富的选择,能够更好地满足不同类型多媒体内容在网页中的展示和交互需求,提升了网页的用户体验和多媒体应用的多样性。
|
2月前
video和audio的事件
【10月更文挑战第5天】video和audio的事件。
37 4
|
7月前
|
JavaScript 前端开发
video-03-video事件汇总
video-03-video事件汇总
119 1
|
移动开发 Android开发 iOS开发
h5使用video标签简单实现播放视频
h5使用video标签简单实现播放视频
1935 0
|
移动开发 HTML5
html5中audio属性和方法
<audio> 标签属性:src:音乐的URLpreload:预加载autoplay:自动播放loop:循环播放controls:浏览器自带的控制条
199 0
|
前端开发
video标签自动播放视频
video标签自动播放视频
378 0
|
JavaScript 前端开发
|
移动开发 HTML5 Web App开发
HTML5音频audio属性
来源:https://segmentfault.com/a/1190000008932943?utm_source=tuicool&utm_medium=referral audio 的控制函数主要有: load() 加载音频、视频软件,通常不必调用,除非是动态生成的元素,用来在播放前预加载pla...
1227 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)。
1395 0
opensecuritytraining video
https://www.youtube.com/user/OpenSecurityTraining/playlists https://www.
764 0