HTML5 <video> 元素同样拥有方法、属性和事件。
其中的方法用于播放、暂停以及加载等。其中的属性(比如时长、音量等)可以被读取或设置。其中的 DOM 事件能够通知您,比方说,<video> 元素开始播放、已暂停,已停止,等等。
下例中简单的方法,向我们演示了如何使用 <video> 元素,读取并设置属性,以及如何调用方法。
实例
为视频创建简单的播放/暂停以及调整尺寸控件:
<!DOCTYPE html> <html> <body> <div style="text-align:center;"> <button onclick="playPause()">播放/暂停</button> <button onclick="makeBig()">大</button> <button onclick="makeNormal()">中</button> <button onclick="makeSmall()">小</button> <br /> <video id="video1" width="420" style="margin-top:15px;"> <source src="http://www.w3school.com.cn/example/html5/mov_bbb.mp4" type="video/mp4" /> <source src="http://www.w3school.com.cn/example/html5/mov_bbb.ogg" type="video/ogg" /> Your browser does not support HTML5 video. </video> </div> <script type="text/javascript"> var myVideo=document.getElementById("video1"); function playPause() { if (myVideo.paused) myVideo.play(); else myVideo.pause(); } function makeBig() { myVideo.width=560; } function makeSmall() { myVideo.width=320; } function makeNormal() { myVideo.width=420; } </script> </body> </html>
效果图:
上面的例子调用了两个方法:play() 和 pause()。它同时使用了两个属性:paused 和 width。
HTML5 <video> - 方法、属性以及事件
下面列出了大多数浏览器支持的视频方法、属性和事件:
注释:在所有属性中,只有 videoWidth 和 videoHeight 属性是立即可用的。在视频的元数据已加载后,其他属性才可用。
相关推荐
在 HTML5 视频标签上启用组件。 该组件可实现: 在多个源(DASH 和/或 mp4/webm)启动时加载并通过本机标签进行跟踪 在现有源和轨道之间手动切换 添加新的和删除现有的源并跟踪 观察 DOM 树的变化(添加或删除源和...
这种标签将有利于搜索引擎的索引整理、小屏幕装置和视障人士使用。同时为其他浏览要素提供了新的功能,通过一个标准接口,如和<video>标记。[3] 一些过时的HTML 4标记将取消,其中包括纯粹用作显示效果的标记,如和...
本书首先介绍了html5 的历史背景、新的语义标签及与以往html 版本相比的根本变化,同时揭示了html5 背后的设计原理。从第2 章起,分别围绕构建令人神往的富web 应用,逐一讨论了html5 的canvas、geolocation 、...
《深入HTML5编程(第 2版)》首先介绍了HTML5的历史背景、新的语义标签及与以往HTML版本相比的根本变化,同时揭示了HTML5背后的设计原理。本书在上一版的基础上新增了SVG和拖放API相关内容,并对部分内容进行了更新。...
通过将src作为字符串传入,可以像使用video标签一样使用ivy-videojs组件: {{ ivy-videojs src = " /path/to/video.mp4 " }} 或将src绑定到对象: {{ ivy-videojs src = src }} import Ember from 'ember' ; ...
这种标签将有利于搜索引擎的索引整理,同时更好的帮助小屏幕装置和视障人士使用,除此之外,还为其他浏览要素提供了新的功能,如和<video>标记。 一些过时的HTML4标记将被取消。其中包括纯粹显示效果的标记,如和...
视频时间线.js 用于控制多个 HTML5 视频对象的基于画布的时间线。 它是由 Marcin Ignac 创建的动画时间线上的一个分支,经过修改以用于 HTML5 视频。 全局播放/暂停/停止控件和所有连接视频沿时间轴滑动。 旨在跟踪...
这种标签将有利于搜索引擎的索引整理、小屏幕设备和视障人士使用。同时为其他浏览要素提供了新的功能,通过一个标准接口,如<audio>和<video>标记。 除了原先的DOM接口,HTML5增加了更多样化的API: ...
这种标签将有利于搜索引擎的索引整理、小屏幕设备和视障人士使用。同时为其他浏览要素提供了新的功能,通过一个标准接口,如<audio>和<video>标记。除了原先的DOM接口,HTML5增加了更多样化的API:...
故接坑自己开干,在原作者的基础上进行了大幅度的代码改造,并采用了全新的项目架构进行开发,维护更加方便,逻辑更加清晰,功能更加强大,兼容更多网站支持网站列表本插件支持支持所有使用HTML5技术进行视频播
上传视频时获取视频第一帧作为封面 完整代码+注释 使用方法:直接将html文件在浏览器打开即可。...使用到的技术:原生Dom操作 + video标签及canplay监听 + cavas绘制 + base64转为Blob + Blob转为FormData