html5视频常用API接口的实例_F11 - 专业站长和开发者的学习网站

分享到

html5视频常用API接口的实例

html5 来源：互联网搜集作者：秩名发布时间：2020-03-21 18:53:58 人浏览

摘要

一、虽然有的属性是boolean类型，但仍旧建议按照XHTML书写（属性名=属性值）格式，避免出现错误（下面加粗的属性为常用属性）属性值功能描述 controls controls 是否显示播放控件 autoplay autoplay 设置是否打开浏览器后自动播放 width Pilex（像素）

一、虽然有的属性是boolean类型，但仍旧建议按照XHTML书写（属性名=”属性值”）格式，避免出现错误（下面加粗的属性为常用属性）

属性	值	功能描述
controls	controls	是否显示播放控件
autoplay	autoplay	设置是否打开浏览器后自动播放
width	Pilex（像素）	设置播放器的宽度
height	Pilex（像素）	设置播放器的高度
loop	loop	设置视频是否循环播放（即播放完后继续重新播放）
preload	preload	设置是否等加载完再播放
src	url	设置要播放视频的url地址
poster	imgurl	设置播放器初始默认显示图片
autobuffer	autobuffer	设置为浏览器缓冲方式，不设置autoply才有效

演示：

				?

									<video controls="controls" width="500px" height="500px" loop autoplay  poster="imgUrl">

									    <source src="黑客之都.mp4" type="video/mp4"/>

									    <track src="a.vtt" label="中文" srclang="zh" kind="subtitles" default/>

									</video>

二、.video标签API方法：Video标签也提供了比较人性化的API接口方法，供写JS时直接调用，方便简单

API	事件说明
addTextTrack()	向音频/视频添加新的文本轨道。
play	video.play(); 播放视频
pause	video.pause(); 暂停播放视频
load	video.load(); 将全部属性回复默认值，视频恢复重新开始状态
canPlayType	var support = videoid.canPlayType('video/mp4'); 判断浏览器是否支持当前类型的视频格式返回值：空字符串：不支持 Maybe：可能支持 Probably：完全支持

关于video标签的API接口在JS中用法如下：

				?

									<!DOCTYPE HTML>

									<html>

									<head>

									    <style>

									        video::cue{

									            background-color:transparent;

									            color:white;

									            font-size:20px;

									            line-height: 100px;

									        }

									    </style>

									</head>

									<body>

									<video controls="controls" id="video1">

									    <source src="黑客之都.Hackerville.S01E01.720P.mp4" type="video/mp4"/>

									    <track src="a.vtt" label="中文字幕" srclang="zh" kind="subtitles" default/>

									</video>

									<button onclick="isPlay(this)">播放</button>

									<button onclick="replay()">重新播放</button>

									<button onclick="isPlayType()">浏览器支持</button>

									<script>

									    var video1 = document.getElementById("video1");  //括号内为video标签的id

									    //播放视频（点击播放按钮，后变成暂停）

									　　 function isPlay(obj1){

									       if(video1.paused){　　　　//paused属于视频api属性

									     　　　　  obj1.innerHTML="暂停";

									     　　　　  video1.play();

									　　　　}else{

									      　　　　 obj1.innerHTML="播放";

									      　　　　 video1.pause();

									　　　　}

									}

									//重新从开头播放

									function replay(){

									       video1.load();

									}

									//判断要播放的视频格式当前浏览器是否支持

									function isPlayType(){

									       var support = video1.canPlayType("video/mp4");

									       console.log(support);  //返回结果：空字符串、maybe（可能支持）、probably（支持）

									}

									</script>

									</body>

									</html>

<!DOCTYPE HTML>
<html>
<head>
    <style>
        video::cue{
            background-color:transparent;
            color:white;
            font-size:20px;
            line-height: 100px;
        }
    </style>
</head>
<body>

<video controls="controls" id="video1">
    <source src="黑客之都.Hackerville.S01E01.720P.mp4" type="video/mp4"/>
    <track src="a.vtt" label="中文字幕" srclang="zh" kind="subtitles" default/>
</video>
<button onclick="isPlay(this)">播放</button>
<button onclick="replay()">重新播放</button>
<button onclick="isPlayType()">浏览器支持</button>

//重新从开头播放
function replay(){
       video1.load();
}

//判断要播放的视频格式当前浏览器是否支持
function isPlayType(){
       var support = video1.canPlayType("video/mp4");
       console.log(support);  //返回结果：空字符串、maybe（可能支持）、probably（支持）
}
</script>
</body>
</html>

三、video标签API属性： Video不仅提供了API接口，还提供了许多的API属性，方便在JS中做判断，如下：大部分属性通过boolean值判断

API属性	事件说明
duration	返回媒体的播放总时长，单位秒
loop	是否循环播放
muted	是否静音
paused	是否暂停
currentTime	当前播放时间（单位：秒）
volume	音量值(0~1)
networkState	返回当前网络状态
playbackRate	播放的倍速(加速、减速播放)(-2~2)
src	当前视频源的URL
ended	返回当前播放是否结束标志
error	返回当前播放的错误状态
initialTime	返回初始播放的位置
mediaGroup	当前音视频所属媒体组 (用来链接多个音视频标签)
played	当前播放部件已经播放的时间范围(TimeRanges对象)
preload	页面加载时是否同时加载音视频
readyState	返回当前的准备状态
seekable	返回当前可跳转部件的时间范围(TimeRanges对象)
audioTracks	返回可用的音轨列表（MultipleTrackList对象）
autoplay	媒体加载后自动播放
buffered	返回缓冲部件的时间范围(TimeRanges对象)
controller	返回当前的媒体控制器（MediaController对象）
controls	显示播控控件
crossOrigin	CORS设置
currentSrc	返回当前媒体的URL
defaultMuted	缺省是否静音
defaultPlaybackRate	播控的缺省倍速
seeking	返回用户是否做了跳转操作
startOffsetTime	返回当前的时间偏移(Date对象)
textTracks	返回可用的文本轨迹(TextTrackList对象)
videoTracks	返回可用的视频轨迹(VideoTrackList对象)

演示

				?

									<script>

									function setting(){

									     video1.muted=true;        　　//设置静音

									     video1.volume=0.2;           //设置音量,1等于100%

									     video1.playbackRate=2;  　　　//2倍播放速度

									     video1.controls=false;　　　　//不显示播控控件

									}

									</script>

四、音频/视频事件

事件	描述
abort	当音频/视频的加载已放弃时触发。
canplay	当浏览器可以开始播放音频/视频时触发。
canplaythrough	当浏览器可在不因缓冲而停顿的情况下进行播放时触发。
durationchange	当音频/视频的时长已更改时触发。
emptied	当目前的播放列表为空时触发。
ended	当目前的播放列表已结束时触发。
error	当在音频/视频加载期间发生错误时触发。
loadeddata	当浏览器已加载音频/视频的当前帧时触发。
loadedmetadata	当浏览器已加载音频/视频的元数据时触发。
loadstart	当浏览器开始查找音频/视频时触发。
pause	当音频/视频已暂停时触发。
play	当音频/视频已开始或不再暂停时触发。
playing	当音频/视频在因缓冲而暂停或停止后已就绪时触发。
progress	当浏览器正在下载音频/视频时触发。
ratechange	当音频/视频的播放速度已更改时触发。
seeked	当用户已移动/跳跃到音频/视频中的新位置时触发。
seeking	当用户开始移动/跳跃到音频/视频中的新位置时触发。
stalled	当浏览器尝试获取媒体数据，但数据不可用时触发。
suspend	当浏览器刻意不获取媒体数据时触发。
timeupdate	当目前的播放位置已更改时触发。
volumechange	当音量已更改时触发。
waiting	当视频由于需要缓冲下一帧而停止时触发。

您可能感兴趣的文章 :

原文链接 : https://www.jb51.net/html5/716927.html

Tag : API(34)html5(144)

HTML5页面打开微信小程序功能实现

微信终于支持由页面跳转至小程序啦 ~ 步骤一：绑定域名登录微信公众平台进入公众号设置的功能设置里填写JS接口安全域名。步骤二：引
html5+实现plus.io进行拍照和图片等获取

使用Hbuilder开发工具开发：实现可对Android机进行控制和获取资源说明：IO模块管理本地文件系统，用于对文件系统的目录浏览、文件的读取
HTML标签实现带动画的抖音LOGO效果

先上结果，最终实现效果如下：还原度应该还可以吧？抖音Logo结构想要用CSS来画抖音的Logo，前提要先了解它的构造，一定是一些几何图形
video.js支持m3u8格式直播的实现教程

为什么要使用video.js？ 1. PC端浏览器并不支持video直接播放m3u8格式的视频 2. 手机端各式各样的浏览器定制的video界面风格不统一，直接写原生
html5调用摄像头截图功能的介绍

关于html5调用音视频等多媒体硬件的API已经很成熟，不过一直找不到机会把这些硬件转化为实际的应用场景，不过近年来随着iot和AI的浪潮，
前端监听websocket消息并实时弹出的代码实例介绍

本文默认您已掌握react生态开发的相关技术，并熟练应用umiJS的原则上，请继续！项目需求： 1、服务侧推送给消息给前端，前端需要展示在
HTML5新增内容和API介绍

classList 属性该属性用于在元素中添加，移除及切换 CSS 类。 classList属性返回元素的类名，作为 DOMTokenList 对象： div id=div class=test1 test2clas
使用canvas仿Echarts实现金字塔图的教程

最近公司项目都偏向于数字化大屏展示????，而这次发给我的项目原型中出现了一个金字塔图?????，好巧不巧，由于我们的图表都是使用Ech
基于HTML十秒做出淘宝页面的方法

十秒钟做出一个网页，可能大家看完会觉得有点标题党，其实不然，把别人的抠过来还是可以的比如我这次先把淘宝的网页扣过来为例第一
HTML5+CSS+JavaScript实现捉虫小游戏的代码

捉虫小游戏首页展示：选择昆虫：效果展示：有密集恐惧症的别玩哟、游戏永远不会停止一直玩项目源码结构：图片和js以及css等基础