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浏览器打开,视频加载没问题.然后我给主 ...
随机推荐
- Js让光标停在输入框input框最后面
var val = $(this) val(); 1.$(this). focus(); 2.$(this).val(""); 3.$(this).val(val); 1. ...
- iOS多线程的七大对象理解
1用面向对象的观点去理解,进程和线程,同步和异步,并行和串行,还有主线程的主队列,的七者关系 进程:程序不运行时就是一堆代码,运行时就是一堆的进程的组合,进程是程序运行的基本单位. 线程:线程是进程的 ...
- (一)Lua脚本语言入门
今天开始自己的Lua语言学习,Lua脚本语言,是介于应用程序和开发其应用程序的底层编程语言之间,,它很方便调用其它语言,它只是在载入时对其进行编译,而不像我们写的单片机程序是预编译的,先编译好然后写入 ...
- spring 注解配置
要在spring mvc中使用注解需要在*-servlet.xml文件中添加 <mvc:annotation-driver />配置 这个配置会创建DefaultAnnotationHan ...
- 简述jpg、gif、png-8、png-24的区别，分别使用场景
gif.jpg.png格式的图片在网站制作中的区别 Gif 格式特点: 1.透明性:gif是一种布尔透明类型,即它可以使全透明,也可是全不透明,但是它并没有半透明的(alpha透明). 2.动画:gi ...
- duilib绘制边框
在使用Duilib时,有时候需要绘制边框,绘制边框时候,上下左右都会有边框线:可在使用时,有时候不需要绘制四边(如果绘制四边,两个有边框的控制放在一起,就有一边会很粗),那该如何处理?,其实用法很简单 ...
- HUST 1541 Student’s question
1541 - Student’s question 时间限制:1秒 内存限制:128兆 696 次提交 134 次通过 题目描述 YYis a student. He is tired of calc ...
- 10步完成Abp(.net core)+Vue的Demo？
1.去abp官网生成项目,选择.net core1.x版本 2.Nuget还原包,需装dotnet core1.1等. 3.新增一个entity,并加入到上下文中 4.然后cmd命令行工具切换到项目 ...
- matlab最简单程序模板
% 脚本文件: 温度转换 % 文件名:temp_conversion % 目标:将输入的华氏温度转换为绝对温度 % % 版本记录: % 时间 编者 描述 % -- :: 泡泡 原始代码 % % 定义变 ...
- margin：0 auto；不居中?
1.没有设置宽度 <div style="margin:0 auto;"></div> 看看上面的代码,根本没有设置DIV的宽度,如何根据宽度自适应呢?新手 ...