HTML5 Video标签

1.代码格式

  <video width="320" height="240" controls><source src="movie.mp4" type="video/mp4"><source src="movie.ogg" type="video/ogg">您的浏览器不支持Video标签。</video>

  视频格式及浏览器支持

2.当前, <video> 元素支持三种视频格式: MP4, WebM, 和 Ogg

浏览器

MP4

WebM

Ogg

Internet Explorer

YES

NO

NO

Chrome

YES

YES

YES

Firefox

YES

YES

YES

Safari

YES

NO

NO

Opera

YES (从 Opera 25 起)

YES

YES

3.视频格式的MIME类型

格式

MIME-type

MP4

video/mp4

Ogg

 video/ogg

WebM

video/webm

 4. 全部属性

属性

描述

audioTracks

返回表示可用音轨的 AudioTrackList 对象

autoplay

设置或返回是否在加载完成后随即播放音频/视频

buffered

返回表示音频/视频已缓冲部分的 TimeRanges 对象

controller

返回表示音频/视频当前媒体控制器的 MediaController 对象

controls

设置或返回音频/视频是否显示控件(比如播放/暂停等)

crossOrigin

设置或返回音频/视频的 CORS 设置

currentSrc

返回当前音频/视频的 URL

currentTime

设置或返回音频/视频中的当前播放位置(以秒计)

defaultMuted

设置或返回音频/视频默认是否静音

defaultPlaybackRate

设置或返回音频/视频的默认播放速度

duration

返回当前音频/视频的长度(以秒计)

ended

返回音频/视频的播放是否已结束

error

返回表示音频/视频错误状态的 MediaError 对象

loop

设置或返回音频/视频是否应在结束时重新播放

mediaGroup

设置或返回音频/视频所属的组合(用于连接多个音频/视频元素)

muted

设置或返回音频/视频是否静音

networkState

返回音频/视频的当前网络状态

paused

设置或返回音频/视频是否暂停

playbackRate

设置或返回音频/视频播放的速度

played

返回表示音频/视频已播放部分的 TimeRanges 对象

preload

设置或返回音频/视频是否应该在页面加载后进行加载

readyState

返回音频/视频当前的就绪状态

seekable

返回表示音频/视频可寻址部分的 TimeRanges 对象

seeking

返回用户是否正在音频/视频中进行查找

src

设置或返回音频/视频元素的当前来源

startDate

返回表示当前时间偏移的 Date 对象

textTracks

返回表示可用文本轨道的 TextTrackList 对象

videoTracks

返回表示可用视频轨道的 VideoTrackList 对象

volume

设置或返回音频/视频的音量

5.常用标签属性

  src

  Controls

  Autoplay

  Preload(auto,none,metadata)

  Poster(video独有)

  Loop

  Width/height(video独有)

6.常用js编程属性

  paused(Boolean/只读)

  ended(Boolean/只读)

  volume(读写)(0~1)

  muted(Boolean/读写)

7.全部方法

方法

描述

addTextTrack()

向音频/视频添加新的文本轨道

canPlayType()

检测浏览器是否能播放指定的音频/视频类型

load()

重新加载音频/视频元素

play()

开始播放音频/视频

pause()

暂停当前播放的音频/视频

8.事件监听

事件

描述

abort

当音频/视频的加载已放弃时

canplay

当浏览器可以播放音频/视频时

canplaythrough

当浏览器可在不因缓冲而停顿的情况下进行播放时

durationchange

当音频/视频的时长已更改时

emptied

当目前的播放列表为空时

ended

当目前的播放列表已结束时

error

当在音频/视频加载期间发生错误时

loadeddata

当浏览器已加载音频/视频的当前帧时

loadedmetadata

当浏览器已加载音频/视频的元数据时

loadstart

当浏览器开始查找音频/视频时

pause

当音频/视频已暂停时

play

当音频/视频已开始或不再暂停时

playing

当音频/视频在已因缓冲而暂停或停止后已就绪时

progress

当浏览器正在下载音频/视频时

ratechange

当音频/视频的播放速度已更改时

seeked

当用户已移动/跳跃到音频/视频中的新位置时

seeking

当用户开始移动/跳跃到音频/视频中的新位置时

stalled

当浏览器尝试获取媒体数据,但数据不可用时

suspend

当浏览器刻意不获取媒体数据时

timeupdate

当目前的播放位置已更改时

volumechange

当音量已更改时

waiting

当视频由于需要缓冲下一帧而停止

转载于:https://www.cnblogs.com/luoshang/p/7345178.html

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/369714.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

某些小时后MySql连接自动掉线

MySql配置为删除任何闲置超过8小时的连接。 这意味着什么&#xff1f; 在8个小时的间隔后返回到已部署的应用程序之后&#xff08;如果未更改默认SQL参数&#xff09;&#xff0c;将会遇到异常情况。 如何解决这个问题&#xff1f; 增加wait_time参数-不是一个好主意&#xff…

AutoMapper的使用

本来是想洋洋洒洒写点儿关于这个神奇的具体使用方法&#xff0c;但是发现园子里已经有了&#xff0c;URL奉上&#xff1a;http://www.cnblogs.com/CreateMyself/p/7635429.html&#xff0c;直接打开撸就行。转载于:https://www.cnblogs.com/pangjianxin/p/8367589.html

shopxx 阿里云OSS设置

shopxx 使用文档没有啊&#xff0c;只能自己看了 数据中心 字段其实是 EndPoint字段 URL前缀 是 图片服务器的主机地址。这个在阿里云回传的时候是不带的。 对应 阿里OSS 外网域名 转载于:https://www.cnblogs.com/nanahome/p/7346641.html

bio java 例子_JAVA BIO 服务器与客户端实现示例

代码只兼容JAVA 7及以上版本。服务器端代码&#xff1a;package com.stevex.app.bio;import java.io.BufferedReader;import java.io.IOException;import java.io.InputStreamReader;import java.io.PrintWriter;import java.net.ServerSocket;import java.net.Socket;import j…

我的HTML总结之常用基础便签

HTML&#xff1a;是Hyper Text Markup Language&#xff08;超级文本标记语言&#xff09;的缩写&#xff0c;HTML不是一种程序&#xff0c;只是一种控制网页中数据显示的标识语言。 HTML由一组标签组成。 HTML的基本结构 <html> <head> <title>第一个HTML示…

您是否应该信任JVM中的默认设置?

如今&#xff0c;JVM被认为是智能的。 预期不会进行太多配置–只需设置要在启动脚本中使用的最大堆&#xff0c;您就可以进行了。 所有其他默认设置都很好。 大概我们当中有些人误以为。 实际上&#xff0c;在运行时期间发生了很多事情&#xff0c;无法自动调整性能&#xff0c…

【翻译】A Next-Generation Smart Contract and Decentralized Application Platform

原文链接&#xff1a;https://github.com/ethereum/wiki/wiki/White-Paper 当中本聪在2009年1月启动比特币区块链时&#xff0c;他同时向世界引入了两种未经测试的革命性的新概念。第一种就是比特币&#xff08;bitcoin&#xff09;&#xff0c;一种去中心化的点对点的网上货币…

SAS Fuctions

1. monotonic(), 单调递增函数。返回一列变量的序列等&#xff0c;类似于_N_ 。 2. index v indexw: INDEX Function Searches a character expression for a string of characters, and returns the position of the string’s first character for the first occurrence of t…

循环内的局部变量和性能

总览 有时会出现一个问题&#xff0c;即分配一个新的局部变量需要花费多少工作。 我的感觉一直是&#xff0c;代码已优化到成本为静态的程度&#xff0c;即一次执行&#xff0c;而不是每次运行时都执行。 最近&#xff0c; Ishwor Gurung建议考虑将一些局部变量移出循环。 我怀…

CSS3伪元素、伪类选择器

伪元素选择器&#xff1a; ::first-letter:为某个元素中的文字的首字母或第一个字使用样式。 ::first-line:为某个元素的第一行文字使用样式。 ::before:在某个元素之前插入一些内容。 ::after:在某个元素之后插入一些内容 ::selection:匹配元素中被用户选中或处于高亮状态的部…

bzoj1212: [HNOI2004]L语言

这又是什么神题啊。 这题一眼AC机。然后呢企鹅也是这么想的。 写完发现企鹅看错题了。然后其实建字典树就行了。 弄个v数组表示能否匹配到第i个位置。然后因为字典里的串很短&#xff0c;就判一下前面L&#xff08;表示字典里最长那个串的长度&#xff09;个位置能否匹配&#…

css小随笔(二)与通用样式

51先在学校HTML5已经有半个多月了&#xff0c;然后这个星期做了一个京东的手机网站&#xff0c;接触到了通用样式&#xff0c;下面以京东的手机站为例 这两个就是京东手机站了的不同的两个板块&#xff0c;因为HTML5仅仅只是学完了基本标签跟css的标签&#xff0c;所以在没有接…

增加堆大小–谨防眼镜蛇效应

“眼镜蛇效应”一词源于英国殖民印度统治英国时所产生的轶事。 英国政府担心毒蛇眼镜蛇的数量。 因此&#xff0c;政府对每条死蛇给予悬赏。 最初&#xff0c;这是一个成功的策略&#xff0c;因为大量蛇被杀死以获取奖励。 最终&#xff0c;印度人开始养殖眼镜蛇以赚取收入。 …

label 标签里面元素点击事件

想做一个单击显示&#xff0c;单击消失的效果&#xff0c;两个元素都在label标签里面&#xff0c;通过打log发现&#xff0c;当点击消失的时候&#xff0c;先执行了消失的单击事件&#xff0c;有执行了出现的单击事件&#xff0c;所以元素并没有消失&#xff0c;这个出现的原因…

java contenttype_POST不同提交方式对应的Content-Type,及java服务器接收参数方式

简介:Content-Type(MediaType)&#xff0c;即是Internet Media Type&#xff0c;互联网媒体类型&#xff1b;也叫做MIME类型&#xff0c;在Http协议消息头中&#xff0c;使用Content-Type来表示具体请求中的媒体类型信息.参考response.Header里常见Content-Type一般有以下四种&…

Java 进程占用 VIRT 虚拟内存超高的问题研究

一、现象说明 最近发现线上机器java 7(openjdk)进程的 VIRT 虚拟内存使用达到了 50G&#xff0c;如下所示&#xff1a; PID    USER  PR NI VIRT  RES SHR S   %CPU   %MEM   TIME   COMMAND 3130   tomcat  20 0 9128m  1.4g 6544 S…

如何创建可扩展的Java应用程序

开放的扩展使许多应用程序受益。 这篇文章描述了两种在Java中实现这种可扩展性的方法。 可扩展的应用 可扩展应用程序是可以扩展其功能而不必重新编译它们 &#xff0c;有时甚至不必重新启动它们的应用程序。 只需将jar添加到类路径中&#xff0c;或通过更复杂的安装过程来实现…

聊聊一直困扰前端程序员的浏览器兼容-【css】

1.为什么会出现浏览器兼容问题&#xff1f; 由于各大主流浏览器由不同的厂家开发&#xff0c;所用的核心架构和代码也很难重和&#xff0c;这就为各种莫名其妙的Bug(代码错误&#xff09;提供了温床。再加上各大厂商出于自身利益考虑而设置的种种技术壁垒&#xff0c;让CSS应用…

权限提升

UACMe – Defeat Windows User Account Control (UAC) https://github.com/hfiref0x/UACME MiniHook Lib project https://github.com/TsudaKageyu/minhook CrackMapExec – Active Directory Post-Exploitation Tool https://www.darknet.org.uk/2017/07/crackmapexec-active-…

java getrealpath_JavaEE路径陷阱之getRealPath

绝对不要使用ServletContext的getRealPath方法获取Web应用的路径&#xff01;应该使用ServletContext的getResource()方法&#xff0c;直接使用相对于Web应用根目录的相对路径来获取资源。ServletContext接口中定位资源的方法getResourcejava.net.URL getResource(java.lang.St…