H5 Video + DOM
HTML 5 Video + DOM
HTML5 <video> - 使用 DOM 进行控制
HTML5 <video> 元素同样拥有方法、属性和事件。
其中的方法用于播放、暂停以及加载等。其中的属性（比如时长、音量等）可以被读取或设置。其中的 DOM 事件能够通知您，比方说，<video> 元素开始播放、已暂停，已停止，等等。
下例中简单的方法，向我们演示了如何使用 <video> 元素，读取并设置属性，以及如何调用方法。
实例
为视频创建简单的播放/暂停以及调整尺寸控件：
播放/暂停 大 中 小
上面的例子调用了两个方法：play() 和 pause()。它同时使用了两个属性：paused 和 width。
HTML5 <video> - 方法、属性以及事件
下面列出了大多数浏览器支持的视频方法、属性和事件：
|
方法 |
属性 |
事件 |
|
play() |
currentSrc |
play |
|
pause() |
currentTime |
pause |
|
load() |
videoWidth |
progress |
|
canPlayType |
videoHeight |
error |
|
duration |
timeupdate |
|
|
ended |
ended |
|
|
error |
abort |
|
|
paused |
empty |
|
|
muted |
emptied |
|
|
seeking |
waiting |
|
|
volume |
loadedmetadata |
|
|
height |
||
|
width |
注释：在所有属性中，只有 videoWidth 和 videoHeight 属性是立即可用的。在视频的元数据已加载后，其他属性才可用。
<!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="/example/html5/mov_bbb.mp4" type="video/mp4" />
<source src="/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>
H5 Video + DOM的更多相关文章
- 【转】视频H5 video最佳实践
原文地址:https://github.com/gnipbao/iblog/issues/11 随着 4G 的普遍以及 WiFi 的广泛使用,手机上的网速已经足够稳定和高速,以视频为主的 HTML5 ...
- H5 video自定义视频控件
1.自定义效果截图 2.效果源码 <!DOCTYPE html> <html> <head> <meta charset="UTF-8"& ...
- H5 video poster属性—设置视频封面
打开一个视频,在点击播放之前会看到一张封面图,点击之后封面消失,随即播放视频. 若现有一需求,要你自定义给某个视频设置封面,应该怎么做呢? 此时可使用H5 video提供的poster属性即 ...
- H5 video全屏与取消全屏兼容
H5 video全屏与取消全屏各浏览器兼容, requestFullscreen()全屏方法,exitFullscreen()退出全屏方法.兼容各个浏览器与css3兼容一样加个前缀即可. // 全屏 ...
- H5 video 标签 详解
昨天使用H5 video 标签 写了视频播放 本打算参考爱奇艺的代码进行修改 发现 它是动态数据 静态页面需要拆解代码 我情急之下 使用了 video 整理一下笔记 后面有人用 ...
- HTML 5 简介、视频、Video + DOM、音频、拖放
HTML5 是下一代的 HTML. 什么是 HTML5? HTML5 将成为 HTML.XHTML 以及 HTML DOM 的新标准. HTML 的上一个版本诞生于 1999 年.自从那以后,Web ...
- H5——video百花齐放（浏览器自带的播放器）
前言 手机自带浏览器的H5播放器 真是百花齐放啊(各个手机厂家有各个厂家的控件UI) 需求 手机浏览器木有控件条 自动播放 全屏处理 监控进度条 快进后退 自动播放 自动播放就给跪了 ios 安卓 为 ...
- HTML 5 Audio/Video DOM canplaythrough 事件在移动端遇到的坑
canplaythrough 事件定义和用法 当浏览器预计能够在不停下来进行缓冲的情况下持续播放指定的音频/视频时,会发生 canplaythrough 事件. 当音频/视频处于加载过程中时,会依次发 ...
- H5 video标签视频加载存在的问题
客户发现上传的视频无法播放,然后主管让我解决这个问题,这个页面不是我负责的,我看了代码,发现视频用的h5标签video标签加载视频.我看了没问题,然后 我先用ie浏览器打开,视频加载没问题.然后我给主 ...
随机推荐
- iOS tabbar点击动画效果实现
正常情况下,我们点击tabbar都只有一个变色效果,但有时候,如果我们想给它添加一个点击动画,该如何做呢? 先上几个效果图: 1.先放大,再缩小 2.Z轴旋转 3.Y轴位移 ...
- node源码详解（六） —— 从server.listen 到事件循环
本作品采用知识共享署名 4.0 国际许可协议进行许可.转载保留声明头部与原文链接https://luzeshu.com/blog/nodesource6 本博客同步在https://cnodejs.o ...
- paramiko库安装
python的paramiko库用于执行ssh2连接(client和server).安装方式如下: 硬件环境:Raspberry 2B,arm,1GB RAM,16GB TF卡; 系统环境:Linux ...
- [JavaScript] 学习笔记-JavaScript基础教程
1.JavaScript介绍 1)JavaScript是互联网上最流行的脚本语言,这门语言可用于Web和HTML,更可广泛用于服务器.pc端.移动端.JavaScript是一种轻量级的编程语言,插入H ...
- [html5] 学习笔记-bootstrap介绍
1.Bootstrap介绍 Bootstrap 是最受欢迎的 HTML.CSS 和 JS 框架,用于开发响应式布局.移动设备优先的 WEB 项目. 2.下面对于官网上给出的最简单的一个bootstra ...
- u3d脚本生命周期
- Omi教程-组件
组件 Omi框架完全基于组件体系设计,我们希望开发者可以像搭积木一样制作Web程序,一切皆是组件,组件也可以嵌套子组件形成新的组件,新的组件又可以当作子组件嵌套至任意组件形成新的组件... 简单组件 ...
- 微信小程序 引用其他js里的方法
微信小程序中,在微信官方开发文档我们可以知道 小程序的目录结构 . 一个小程序页面由四个文件组成,一个小程序页面的四个文件具有相同路径与文件名,由此我们可知一个小程序页面对应着一个跟页面同名的js文件 ...
- wcf ServiceContract
ServiceContract是什么 ServiceContract怎么用
- 响应者链-----iOS
正文 以触摸事件为例,说一下响应者链 当发生触摸事件后,Runloop监听到事件,会将其事件打包成一个UIEvent事件,并放入当前活动UIApplication的事件队列中,再会传给UIWindow ...