html5 video的简单使用

h5的video标签省去了调用插件，UI能根据环境自动调整，方便快捷。但问题在于文档太难看。各种花里胡哨的video插件其实用起来也挺麻烦，bug不少，费半天劲最后发现甚至不如手写一个来的方便。

仅介绍H5 video标签最基本的使用

demo：

<video src="xxx.video" controls="controls" controlslist="nodownload" disablePictureInPicture="true"width="100%" height="240" poster="xxx.jpg" x5-video-player-type="h5">
</video>

x5-video-player-type=“h5”：启动H5播放
controlslist=“nodownload”：去掉下载按钮
controlslist=“nofullscreen”：去掉全屏按钮
disablePictureInPicture=“true”：隐藏“画中画”

// 隐藏全屏按钮
video::-webkit-media-controls-fullscreen-button {display: none;z-index: -1;
}

画中画、全屏控件在页内播放时存在很多bug：

全部隐藏后清爽了很多

属性与事件：
这方面文章很多
https://www.runoob.com/tags/ref-av-dom.html
https://www.jb51.net/html5/680459.html

video选择器：

//jQuery
var myVideo = $("#id").get(0)
var myVideo = $("video").get(0)
//DOM
var myVideo = document.getElementById("id")
var myVideos = document.getElementsByTagName("video")

实用属性：

myVideo.paused; //返回布尔值，判断视频是否暂停
myVideo.currentTime; //返回当前播放时间
myVideo.currentTime(sec); //设置当前播放时间

常用事件：

myVideo.addEventListener('play',function(e){})
myVideo.addEventListener('pause',function(e){})
myVideo.addEventListener('timeupdate',function(e){})
//Internet Explorer 8 及更早 IE 版本的浏览器不支持 addEventListener() 方法。
myVideo.onended = function(){}

最后，还可以打印查看有哪些被忽视的属性及方法

html5 video的简单使用相关推荐

html5 video标签简单使用
标签是 HTML 5 的新标签. 标签定义视频,比如电影片段或其他视频流. 目前, 元素支持三种视频格式:MP4.WebM.Ogg. 提示:可以在和标签之间放置文本内容,这样不支持元素的浏览器就 ...
jquery设置video的宽度_使用jQuery和CSS自定义HTML5 Video 控件简单适用
Html5 Video是现在html5最流行的功能之一,得到了大多数最新版本的浏览器支持.包括IE9,也是如此.不同的浏览器提供了不同的原生态浏览器视频空间.我们制作自定义视频控件为了在所有的浏览器中 ...
HTML5 Video 添加字幕，操作简单，不需要剪辑
HTML5 Video视频支持外挂字幕,文件后缀名是.vtt,称为WebVTT格式,专门的web字幕格式. 使用很简单,用一个<track>元素即可,例如: 官方文档:https://w3 ...
html 显示状态条,怎么控制html5 video 控制条显示和隐藏时间
Html5 Video是现在html5最流行的功能之一,得到了大多数最新版本的浏览器支持.包括IE9,也是如此.不同的浏览器提供了不同的原生态浏览器视频空间.我们制作自定义视频控件为了在所有的浏览器中 ...
html video各种控制命令,HTML5 Video(视频)
HTML5 Video(视频) 很多站点都会使用到视频. HTML5 提供了展示视频的标准. 检测您的浏览器是否支持 HTML5 视频: 检测 Web站点上的视频直到现在,仍然不存在一项旨在网页上显 ...
html5 dom video,HTML5 / HTML5 video - 使用 DOM 进行控制 - 汇智网
HTML5 < video > - 使用 DOM 进行控制 HTML5 < video > 和 < audio > 元素同样拥有方法.属性和事件. < vid ...
html选择本地文件视频并播放器,使HTML5视频播放器播放不同的文件(Make a HTML5 video player play a different file)...
使HTML5视频播放器播放不同的文件(Make a HTML5 video player play a different file) 在播放视频时,我无法让HTML5播放器播放不同的视频,我尝试更改 ...
HTML5的最简单模板
HTML5的最简单模板如果你需要开始一个新的HTML5项目的话,大家肯定会需要一个最简单的模板,这里是一个非常简单并且清晰的HTML5模板,相信大家会喜欢! <!DOCTYPE html> ...
通过HTML5 Video来优化动态GIF
文章转载自众成翻译,原文链接:通过HTML5 Video来优化动态GIF 摘要- 网页中的动态GIF图片是非常受欢迎的,因为它们相比静态图片更生动,相比网页视频更简单.但是GIF图片通常具有较大的体积 ...
web前端入门到实战：HTML5 video视频播放
一.下面播报一则新闻 Chrome 70已经原生支持HTML5 <video>播放时候Picture-in-Picture,也就是俗称的画中画技术,也就是很多视频网站看评论时候,播放视频变 ...

html5 video的简单使用

html5 video的简单使用

html5 video的简单使用相关推荐

最新文章

热门文章