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>
目录
相关文章
|
3月前
|
编解码 前端开发 iOS开发
响应式图片的实现(含picture标签、srcset属性、sizes属性的使用方法,设备像素比详解)
响应式图片的实现(含picture标签、srcset属性、sizes属性的使用方法,设备像素比详解)
33 0
|
5月前
|
JavaScript 前端开发
video-03-video事件汇总
video-03-video事件汇总
80 1
|
移动开发 Android开发 iOS开发
h5使用video标签简单实现播放视频
h5使用video标签简单实现播放视频
1879 0
|
移动开发 HTML5
html5中audio属性和方法
<audio> 标签属性:src:音乐的URLpreload:预加载autoplay:自动播放loop:循环播放controls:浏览器自带的控制条
184 0
|
JavaScript
audio用法
之前老早之前写的 但不是markdown格式,总觉得不爽 这个记录下吧 都比较简单直接上代码吧
213 0
|
前端开发
video标签自动播放视频
video标签自动播放视频
359 0
|
JavaScript 前端开发
|
移动开发 HTML5 Web App开发
HTML5音频audio属性
来源:https://segmentfault.com/a/1190000008932943?utm_source=tuicool&utm_medium=referral audio 的控制函数主要有: load() 加载音频、视频软件,通常不必调用,除非是动态生成的元素,用来在播放前预加载pla...
1216 0
image的srcset属性
介绍 响应式页面中经常用到根据屏幕密度设置不同的图片。这个时候肯定会用到image标签的srcset属性。srcset属性用于设置不同屏幕密度下,image自动加载不同的图片。
929 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)。
1381 0