HTML5的Video标签的属性,方法和事件汇总及Video填充满父div的大小_lancnn的博客-程序员秘密

技术标签: HTML5的Video标签的属性  video  方法和事件汇总  

HTML5的Video标签的属性,方法和事件汇总及Video填充满父div的大小

原文链接:http://www.jianshu.com/p/404d01b8e713/
https://blog.csdn.net/a460550542/article/details/52689915

标签的属性

● src :视频的属性
● poster:视频封面,没有播放时显示的图片
● preload:预加载
● autoplay:自动播放
● loop:循环播放
● controls:浏览器自带的控制条
● width:视频宽度
● height:视频高度
html 代码

//audio和video都可以通过JS获取对象,JS通过id获取video和audio的对象
获取video对象
Media = document.getElementById(“media”);
Media方法和属性:
HTMLVideoElement和HTMLAudioElement 均继承自HTMLMediaElement
● Media.error; //null:正常
● Media.error.code; //1.用户终止 2.网络错误 3.解码错误 4.URL无效
//网络状态
- Media.currentSrc; //返回当前资源的URL
- Media.src = value; //返回或设置当前资源的URL
- Media.canPlayType(type); //是否能播放某种格式的资源
- Media.networkState; //0.此元素未初始化 1.正常但没有使用网络 2.正在下载数据 3.没有找到资源
- Media.load(); //重新加载src指定的资源
- Media.buffered; //返回已缓冲区域,TimeRanges
- Media.preload; //none:不预载 metadata:预载资源信息 auto:
//准备状态
- Media.readyState;//1:HAVE_NOTHING 2:HAVE_METADATA 3.HAVE_CURRENT_DATA 4.HAVE_FUTURE_DATA 5.HAVE_ENOUGH_DATA
- Media.seeking; //是否正在seeking
//回放状态
● Media.currentTime = value; //当前播放的位置,赋值可改变位置
● Media.startTime; //一般为0,如果为流媒体或者不从0开始的资源,则不为0
● Media.duration; //当前资源长度 流返回无限
● Media.paused; //是否暂停
● Media.defaultPlaybackRate = value;//默认的回放速度,可以设置
● Media.playbackRate = value;//当前播放速度,设置后马上改变
● Media.played; //返回已经播放的区域,TimeRanges,关于此对象见下文
● Media.seekable; //返回可以seek的区域 TimeRanges
● Media.ended; //是否结束
● Media.autoPlay; //是否自动播放
● Media.loop; //是否循环播放
● Media.play(); //播放
● Media.pause(); //暂停
//视频控制
● Media.controls;//是否有默认控制条
● Media.volume = value; //音量
● Media.muted = value; //静音
TimeRanges(区域)对象
● TimeRanges.length; //区域段数
● TimeRanges.start(index) //第index段区域的开始位置
● TimeRanges.end(index) //第index段区域的结束位置
//相关事件
var eventTester = function(e){
Media.addEventListener(e,function(){
console.log((new Date()).getTime(),e)
},false);
}
● eventTester(“loadstart”); //客户端开始请求数据
● eventTester(“progress”); //客户端正在请求数据
● eventTester(“suspend”); //延迟下载
● eventTester(“abort”); //客户端主动终止下载(不是因为错误引起)
● eventTester(“loadstart”); //客户端开始请求数据
● eventTester(“progress”); //客户端正在请求数据
● eventTester(“suspend”); //延迟下载
● eventTester(“abort”); //客户端主动终止下载(不是因为错误引起),
● eventTester(“error”); //请求数据时遇到错误
● eventTester(“stalled”); //网速失速
● eventTester(“play”); //play()和autoplay开始播放时触发
● eventTester(“pause”); //pause()触发
● eventTester(“loadedmetadata”); //成功获取资源长度
● eventTester(“loadeddata”); //
● eventTester(“waiting”); //等待数据,并非错误
● eventTester(“playing”); //开始回放
● eventTester(“canplay”); //可以播放,但中途可能因为加载而暂停
● eventTester(“canplaythrough”); //可以播放,歌曲全部加载完毕
● eventTester(“seeking”); //寻找中
● eventTester(“seeked”); //寻找完毕
● eventTester(“timeupdate”); //播放时间改变
● eventTester(“ended”); //播放结束
● eventTester(“ratechange”); //播放速率改变
● eventTester(“durationchange”); //资源长度改变

● eventTester(“volumechange”); //音量改变

Github 视频播放器项目:videoplayer

想要video能自动填充慢父div的大小,只要给video标签加上style=”width= 100%; height=100%; object-fit: fill”即可。
object-fit语法
object-fit属性的语法非常的简单:
object-fit:fill | contain | cover | none | scale-down

object-fit取值说明
object-fit主要适合于替换元素,比如:、、、、、和等。其默认值为fill。object-fill取值的说明如下:
● fill:此值为boject-fit的默认值,替换内容的大小被设置为填充元素的内容框,也就是说,元素的内容扩大到完全填充容器的外形尺寸,即使这打破其内在的宽高比。
● contain:替换元素内容大小保持长宽比例填充元素内容容器,其具体对象大小被解析为一个包含元素的宽度和高度。也就是说,如果你在替换元素上设置一个明确的高度和宽度,此值将导致内容大小,完全在固定的比例显示,但仍在元素尺寸内显示。
● cover:替换元素内容大小保持长宽比例填充元素内容容器,其具体对象大小被解析为覆盖整个元素的宽度和高度。也就是说,替换元素内容大小保持长宽比,但改变宽度和高度,以便完全覆盖内容元素。
● none:替换元素内容不调整大小以适应内部元素的容器,内容完全忽略设置在元素上的任何高度和权重,并且仍在元素尺寸内显示。
● scale-down:当内容大小设置了non或contain,将导致具体对象变得更小。

版权声明:本文为博主原创文章,遵循 CC 4.0 BY-SA 版权协议,转载请附上原文出处链接和本声明。
本文链接:https://blog.csdn.net/weixin_41767649/article/details/79918197

智能推荐

Vue与Node.js通过socket.io通信的示例_weixin_34059951的博客-程序员秘密

2019独角兽企业重金招聘Python工程师标准>>> ...

六种编码方案_Super齐的博客-程序员秘密

文章目录DeepAcet采用的六种编码方案一、one-hot二、 BLOSUM62 matrix1.BLOSUM2.BLOSUM62三、 a composition of K-space amino acid pairs四、 information gain五、 physicochemical properties六、 a position specific scoring matrix1.引入库2.读入数据总结DeepAcet采用的六种编码方案一、one-hot一句话概括:one hot编码是将

java bigdecimal 小数_java-使用BigDecimal确定小数位数_weixin_39666496的博客-程序员秘密

我对具有以下getNumberOfDecimalPlace函数感兴趣:System.out.println("0 = " + Utils.getNumberOfDecimalPlace(0)); // 0System.out.println("1.0 = " + Utils.getNumberOfDecimalPlace(1.0)); // 0System.out.pr...

快捷指令获取url内容_iphone快捷指令在哪怎么用 苹果ios13快捷指令安装使用教程..._weixin_39777019的博客-程序员秘密

苹果手机IOS13“不受信任快捷指令”是怎么使用和安装的,很多人都不是很清楚,所以,今天小编就详细为大家介绍介绍。苹果iOS13快捷指令怎么安装使用由于苹果自带的快捷指令中心,捷径比较少,因此大部分果粉都会在网上下载安装一些大家共享的快捷指令。在iOS12系统中,网上第三方的快捷指令安装很简单,直接在Safari浏览器中打开共享捷径链接,即可获取安装。但在最新的 iOS13 系统中,默认只能安装快...

注意力机制热力图可视化_注意力热力图_MarkJhon的博客-程序员秘密

import tensorflow as tfimport numpy as npimport cv2def visualize_attention_map(attention_map): """ The attention map is a matrix ranging from 0 to 1, where the greater the value, the greater attention is suggests. :param attention_map.

远程桌面全屏(快捷键)_远程全屏快捷键_ppt_12306的博客-程序员秘密

也是百度的东西,仅给自己作个备忘。台式机那种有线长长的键盘就比较固定:Ctrl+Alt+Break(Break在键盘右上角那几个按键。仔细看,含有Break单词的就是了)笔记本:笔记本的相对坑点了。一般为:Ctrl+Alt+Fn+b通过“Fn+b”键实现Break键的功能(看到有个说macbook的break是Fn+Esc)但我的海尔笔记本不管用。后面找到用的是:Ct...

随便推点

“LED+智能”在公路隧道照明的应用研究_智能交通技术的博客-程序员秘密

随着我国经济的飞速发展,人们对道路照明质量的要求也越来越高,公路隧道具有缩短里程及利用地下空间的特点,机动车驾驶员行车时视觉感受到的是路面的亮度,特别是隧道内外的亮度差异对行车安全影响特别...

最简洁的 Android10 动态申请权限获取方法,代码简单,操作简单,亲测有效。_android10申请所有文件权限_仟易柴君的博客-程序员秘密

首先第一步在【AndroidManifest.xml】文件中添加你要申请的权限<uses-permission android:name="android.permission.WRITE_EXTERNAL_STORAGE" />然后在application标签下加上这条代码:android:requestLegacyExternalStorage="true"【如图所示】第二步在工具类中封装一个方法,代码如下:/** * 动态申请权限 * @param

宝塔和小皮哪个好_Linux服务器宝塔面板小白安装教程_weixin_39972264的博客-程序员秘密

Linux服务器作为建站服务器的首选,深受广大程序猿喜欢。不过小白seoer想要用Linux建站,除了要对Linux和shell等指令的了解,还要面对学习过程中的各种疑难杂症。因此,有一个简单、可视化的操作界面,不需要各种指令在Linux服务器上管理网站,就显得方便很多。这就是我们需要使用到的工具——宝塔面板。一、宝塔面板是什么宝塔面板是一款提升运维效率的服务器管理软件。于我们而言,作用就是在Li...

xlua-framework之网络框架_xluaframework_PassionY的博客-程序员秘密

前言一般我们说到网络框架,主要是指Socket网络框架,如果是Http的话,我们没有必要单独介绍了,简单用可以直接使用WWW或者UnityWebRequest,如果稍微复杂的使用,可以使用RestSharp库。所以我们本章主要讨论的是xlua-framework框架是如何实现socket网络框架的。虽然lua自带的有socket库,但是luasocket其实更适合写命令行工具。游戏里直接用为Lua写的网络库其实不多,大多数是从C++、C#封装一个自己的库,然后在lua中调用。当然也有luasocket实

文献管理软件 linux,5款常用的文献管理软件_A李绍平的博客-程序员秘密

来源:木耶百新编辑:小文文献管理软件的便利之处在于:可以直接联网到不同的数据库进行检索,免去登录不同数据库的劳累之苦,提高效率;可以非常方便地管理文献信息,包括文摘、全文、笔记、以及其它的附件材料等等;检索功能方便查找到需要的文献;多数软件还具备一定的分析功能;文末参考文献格式的编辑,轻松便捷。常用的文献管理软件首推EndNote了,但是除了EndNote还有很多文献管理软件,有的是公开源代码,有...

模型训练缺失值问题_xxaxtt的博客-程序员秘密

1,不处理,删除,填充2,xgboost对确实值的处理3,神经网络对缺失值的处理

推荐文章

热门文章

相关标签