介绍 & lt; video 控制=癱ontrols",宽度=?00 px",身高=?00 px", loop autoplay ,海报=癷mgUrl"比;
,,,& lt; source src=https://www.yisu.com/zixun/昂诳椭糾p4 " type="视频/mp4 "/>
<跟踪src="。vtt”标签="中文" srclang=" zh型”=白帜弧澳?>
& lt; ! DOCTYPE HTML>
& lt; html>
& lt; head>
,,,& lt; style>
,,,,,,,视频:提示{
,,,,,,,,,,,背景颜色:透明;
,,,,,,,,,,,颜色:白色;
,,,,,,,,,,,字体大小:20 px;
,,,,,,,,,,,行高:,100 px;
,,,,,,,}
,,,& lt;/style>
& lt;/head>
& lt; body>
& lt; video 控制=癱ontrols", id=皏ideo1"比;
,,,& lt; source src=https://www.yisu.com/zixun/昂诳椭肌?Hackerville.S01E01.720P.mp4 type="视频/mp4 "/>
<跟踪src="。vtt”标签="中文字幕" srclang=" zh型”=白帜弧澳?>
<按钮onclick=" isPlay(这)">播放
<按钮onclick="回放()">重新播放
<按钮onclick=" isPlayType() ">浏览器支持
<脚本>
var video1=. getelementbyid (“video1”);//括号内为视频标签的id//播放视频(点击播放按钮,后变成暂停)
函数isPlay(其中obj1) {
如果(video1.paused){//暂停属于视频api属性
obj1.innerHTML="暂停”;
video1.play ();
其他}{
obj1.innerHTML="播放”;
video1.pause ();
}
}//重新从开头播放
函数重放(){
video1.load ();
}//判断要播放的视频格式当前浏览器是否支持
函数isPlayType () {
var支持=video1.canPlayType(视频/mp4);
console.log(支持);//返回结果:空字符串,也许(可能支持),可能(支持)
}>
今天就跟大家聊聊有关html5中有哪些视频API接口,可能很多人都不太了解,为了让大家更加了解,小编给大家总结了以下内容,希望大家根据这篇文章可以有所收获。
一,虽然有的属性是布尔类型,但仍旧建议按照XHTML书写(属性名="属性值”)格式,避免出现错误(下面加粗的属性为常用属性)
属性值功能描述controlscontrols是否显示播放控件autoplayautoplay设置是否打开浏览器后自动播放widthPilex(像素)设置播放器的宽度heightPilex(像素)设置播放器的高度looploop设置视频是否循环播放(即播放完后继续重新播放)preloadpreload设置是否等加载完再播放srcurl设置要播放视频的url地址posterimgurl设置播放器初始默认显示图片autobufferautobuffer设置为浏览器缓冲方式,不设置autoply才有效演示:
二,.video标签API方法:视频标签也提供了比较人性化的API接口方法,供写JS时直接调用,方便简单
API事件说明addTextTrack()向音频/视频添加新的文本轨道.playvideo.play ();,,,播放视频pausevideo.pause ();,暂停播放视频loadvideo.load ();,,将全部属性回复默认值,视频恢复重新开始状态canPlayTypevar支持=videoid.canPlayType(& # 39;视频/mp4 # 39;);,,判断浏览器是否支持当前类型的视频格式返回值:空字符串:不支持也许:可能支持可能:完全支持关于视频标签的API接口在JS中用法如下: