HTML5 新元素之VIDEO标签的js操作
本文参考w3school的HTML DOM Video 对象。
Video 对象属性
属性 | 描述 |
---|---|
audioTracks | 返回表示可用音频轨道的 AudioTrackList 对象。 |
autoplay | 设置或返回是否在就绪(加载完成)后随即播放视频。 |
buffered | 返回表示视频已缓冲部分的 TimeRanges 对象。 |
controller | 返回表示视频当前媒体控制器的 MediaController 对象。 |
controls | 设置或返回视频是否应该显示控件(比如播放/暂停等)。 |
crossOrigin | 设置或返回视频的 CORS 设置。 |
currentSrc | 返回当前视频的 URL。 |
currentTime | 设置或返回视频中的当前播放位置(以秒计)。 |
defaultMuted | 设置或返回视频默认是否静音。 |
defaultPlaybackRate | 设置或返回视频的默认播放速度。 |
duration | 返回视频的长度(以秒计)。 |
ended | 返回视频的播放是否已结束。 |
error | 返回表示视频错误状态的 MediaError 对象。 |
height | 设置或返回视频的 height 属性的值。 |
loop | 设置或返回视频是否应在结束时再次播放。 |
mediaGroup | 设置或返回视频所属媒介组合的名称。 |
muted | 设置或返回是否关闭声音。(true或false) |
networkState | 返回视频的当前网络状态。 |
paused | 设置或返回视频是否暂停。 |
playbackRate | 设置或返回视频播放的速度。 |
played | 返回表示视频已播放部分的 TimeRanges 对象。 |
poster | 设置或返回视频的 poster 属性的值。 |
preload | 设置或返回视频的 preload 属性的值。 |
readyState | 返回视频当前的就绪状态。 |
seekable | 返回表示视频可寻址部分的 TimeRanges 对象。 |
seeking | 返回用户当前是否正在视频中进行查找。 |
src | 设置或返回视频的 src 属性的值。 |
startDate | 返回表示当前时间偏移的 Date 对象。 |
textTracks | 返回表示可用文本轨道的 TextTrackList 对象。 |
videoTracks | 返回表示可用视频轨道的 VideoTrackList 对象。 |
volume | 设置或返回视频的音量。(0-1之间) |
width | 设置或返回视频的 width 属性的值。 |
Video 对象方法
方法 | 描述 |
---|---|
addTextTrack() | 向视频添加新的文本轨道。 |
canPlayType() | 检查浏览器是否能够播放指定的视频类型。 |
load() | 重新加载视频元素。 |
play() | 开始播放视频。 |
pause() | 暂停当前播放的视频。 |
Video 对象方法补充:
在video的方法中没有涉及到视频的全屏js方法;经过查询资料,发现这个需要调用一些基础的js API来实现全屏的切换,
启动全屏模式
全屏API requestFullscreen方法在一些老的浏览器里面依然使用带前缀形式的方法名,因此可能需要进行检测判断:
(带前缀,意思就是各个浏览器内核不通用.)
// 找到支持的方法, 使用需要全屏的 element 调用
function launchFullScreen(element) {
if(element.requestFullscreen) {
element.requestFullscreen();
} else if(element.mozRequestFullScreen) {
element.mozRequestFullScreen();
} else if(element.webkitRequestFullscreen) {
element.webkitRequestFullscreen();
} else if(element.msRequestFullscreen) {
element.msRequestFullscreen();
}
} // 在支持全屏的浏览器中启动全屏
// 整个页面
launchFullScreen(document.documentElement);
// 某个元素
launchFullScreen(document.getElementById("videoElement"));
将需要全屏显示的DOM元素作为参数,调用此方法即可让window进入全屏状态,有时候可能需要用户同意(浏览器自己和用户交互),假若用户拒绝,则可能出现各种不完全的全屏.
如果用户同意进入全屏,那么工具栏以及其他浏览器组件会隐藏起来,使document框架的宽度和高度横跨整个屏幕.
退出全屏模式
使用 exitFullscreen 方法可以使浏览器退出全屏,返回原先的布局. 该方法在一些老的浏览器上也是支持前缀方法.
// 退出 fullscreen
function exitFullscreen() {
if(document.exitFullscreen) {
document.exitFullscreen();
} else if(document.mozExitFullScreen) {
document.mozExitFullScreen();
} else if(document.webkitExitFullscreen) {
document.webkitExitFullscreen();
}
}
//请注意: exitFullscreen 只能通过 document 对象调用 —— 而不是使用普通的 DOM element. // 调用退出全屏方法!
exitFullscreen();
Fullscreen 属性与事件
一个坏消息,到目前为止,全屏事件和方法依然是带前缀的,好消息就是很快主流浏览器就会都支持。
- document.fullscreenElement: 当前处于全屏状态的元素 element.
- document.fullscreenEnabled: 标记 fullscreen 当前是否可用.
当进入/退出 全屏模式时,会触发 fullscreenchange 事件:
var fullscreenElement =
document.fullscreenEnabled
|| document.mozFullscreenElement
|| document.webkitFullscreenElement;
var fullscreenEnabled =
document.fullscreenEnabled
|| document.mozFullscreenEnabled
|| document.webkitFullscreenEnabled;
另外,当元素处于全屏的时候,浏览器相应的会有一些全屏样式,如需修改,可以重写一下全屏的样式;
/* html */
:-webkit-full-screen {
/* properties */
}
:-moz-fullscreen {
/* properties */
} :fullscreen {
/* properties */
} /* deeper elements */
:-webkit-full-screen video {
width: 100%;
height: 100%;
} /* styling the backdrop */
::backdrop {
/* properties */
}
HTML5 新元素之VIDEO标签的js操作的更多相关文章
- 让IE8支持html5中的video标签
这是一篇综合几个前辈的解决方案. 使用video的时候,要遇到的问题. ①不兼容ie9及其以下版本 在<head>里添加两行, 参考张鑫旭前辈的博客,但是在ie8中薄播放. <!-- ...
- 检测是否支持HTML5中的Video标签
//检测是否支持HTML5 function checkVideo() { if (!!document.createElement('video').canPlayType) { var vidTe ...
- html5中的video标签和audio标签
不管是否承认,flash早已不像过往那样如日中天了.亚马逊全面放弃flash.苹果放弃flash.安卓也放弃了移动端的flash支持.事实上flash已经不太适合web开发了,因为HTML5中的vid ...
- HTML5 audio与video标签实现视频播放,音频播放
随着互联网的飞速发展以及HTML5的应用,越来越多的项目中用到video,audio当常用标签. <audio> 标签属性 <audio src="song.mp3&quo ...
- HTML5的自定义属性data-*详细介绍和JS操作实例
当然高级浏览器下可通过脚本进行定义和数据存取.在项目实践中非常有用. 例如: 复制代码 代码如下: <div id = "user" data-uid = "123 ...
- 【html5】 解决 video标签 不自动全屏
<video controls="controls" poster='' src='' preload="auto" x5-playsinline=&qu ...
- HTML5新增video标签及对应属性、API详解
知识说明: 比不上很牛的前端开发人员,但自始至终明白“万丈高楼平地起”,基础最重要,初学HTML5,稳固基础第一步,把最基本的整理下来,留下自己学习的痕迹.HTML5新增的video标签,将其属性以及 ...
- mp4 格式无法使用html5的video标签播放
只有视频编码为h264的视频才能在html5中使用video标签播放 我的解决方法为:下载魔影工厂,按照如下图所示步骤操作: width:600px;
- 防止html5的video标签在iphone中自动全屏
问题: 当在iphone中打开html5页面中的video视频时,会默认调取系统播放器,全屏播放视频资源. 解决方式: 1. 首先在html5页面的video标签中添加webkit-playsinli ...
随机推荐
- xampp怎么操作数据库mysql
1.打开软件的主界面,打开Apache和MySQL,然后点击MySQL后面的admin.且我操作时,Apache,MySQL要启动,才打的开. 2.打开MySQL,报错. 09:00:23 [mysq ...
- mailing list的原理
1 发往mailing list邮箱的邮件会被所有订阅了该邮箱的人收到 说白了,就是一种邮件群发机制,为了简化群发,不是将所有的收件人放到收件人列表中,而是发往总的邮箱即可. 2 要向该mailing ...
- python系列十五:Python3 错误和异常
#!/usr/bin/python #-*-coding:gbk-*- #Python3 错误和异常'''Python 语法错误或者称之为解析错语法分析器指出了出错的一行,并且在最先找到的错误的位置标 ...
- DIV背景图片
.bigY{ position:absolute; width:95px; height:93px; visibility:visible; right: 277 ...
- Django 之 CBV & FBV
FBV FBV(function base views) 就是在视图里使用函数处理请求. 在之前django随笔中,一直使用的是这种方式,不再赘述. CBV CBV(class base views) ...
- python 时间模块小结
python有两个重要的时间模块,分别是time和datetime time模块 表示时间的几种方法 时间元组 time.struct_time( tm_year=2016, tm_mon=7, tm ...
- python并发编程&多进程(一)
本篇理论居多,实际操作见: python并发编程&多进程(二) 一 什么是进程 进程:正在进行的一个过程或者说一个任务.而负责执行任务则是cpu. 举例(单核+多道,实现多个进程的并发执行) ...
- Python获取主机名
import socket print socket.gethostname()
- Zookeeper配置说明
转载自:https://my.oschina.net/u/2338362/blog/399361 Zookeeper的安装和配置十分简单, 既可以配置成单机模式, 也可以配置成集群模式. 下面将分别进 ...
- [String ] StringBuffer VS StringBuilder
StringBuilder的性能高于StringBuffer,因为StringBuffer是线程安全的. 首先说明一下,一般情况下,字符串相加默认是StringBuilder,但是当数量大于100,或 ...