html5播放器常用: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设置或返回是否关闭声音。
networkState返回视频的当前网络状态。
paused设置或返回视频是否暂停。
playbackRate设置或返回视频播放的速度。
played返回表示视频已播放部分的 TimeRanges 对象。
poster设置或返回视频的 poster 属性的值。
preload设置或返回视频的 preload 属性的值。
readyState返回视频当前的就绪状态。
seekable返回表示视频可寻址部分的 TimeRanges 对象。
seeking返回用户当前是否正在视频中进行查找。
src设置或返回视频的 src 属性的值。
startDate返回表示当前时间偏移的 Date 对象。
textTracks返回表示可用文本轨道的 TextTrackList 对象。
videoTracks返回表示可用视频轨道的 VideoTrackList 对象。
volume设置或返回视频的音量。
width设置或返回视频的 width 属性的值。

Video 对象方法

方法描述
addTextTrack()向视频添加新的文本轨道。
canPlayType()检查浏览器是否能够播放指定的视频类型。
load()重新加载视频元素。
play()开始播放视频。
pause()暂停当前播放的视频。

酷播云倍速播放功能_播放效果

 自已动手修改HTML5视频标签的速率

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>阿酷TONY</title>
</head>
<body>
<div style="text-align:center">
  <button οnclick="playPause()">播放/暂停</button>
  <button οnclick="makeBig()">放大</button>
  <button οnclick="makeSmall()">缩小</button>
  <button οnclick="makeNormal()">普通</button>
  <button οnclick="getPlaySpeed()" type="button">播放速度是多少?</button>
  <button οnclick="setPlaySpeed()" type="button">将视频设置为以快速播放</button>
  <br>
  <video id="video" width="420" autoplay controls>
    <source src="test.mp4" type="video/mp4">
    TONY提示:您浏览器不支持 HTML5 video 标签。 </video>
</div>
<script> 
var myVideo=document.getElementById("video"); 
function getPlaySpeed() {
    alert(myVideo.playbackRate);//获取播放速度
    }
function setPlaySpeed()  { 
    myVideo.playbackRate=2;//设定新的播放速度2倍速度
    } 
function playPause(){ 
    if (myVideo.paused) 
      myVideo.play(); //播放
    else 
      myVideo.pause(); //暂停播放
    } 
function makeBig(){ 
    myVideo.width=660; 
    } 
function makeSmall(){ 
    myVideo.width=230; 
    } 
function makeNormal(){ 
    myVideo.width=400; 
    } 
</script>
</body>
</html>

我的视频应用类原创文章

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值