下面来到我们video的对象属性和对象方法,在这里,我们可以进行(自由)的操作
目录
一、参考资料
详解video对象,看完必会,你也能写一个视频播放器(三)_哔哩哔哩_bilibili
二、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对象方法
Method | 描述 |
---|---|
addTextTrack() | 向视频添加新的文本轨道。 |
canPlayType() | 检查浏览器是否能够播放指定的视频类型。 |
load() | 重新加载视频元素。 |
play() | 开始播放视频。 |
pause() | 暂停当前播放的视频。 |
四、对象属性和方法的简单使用
4.1 编写video
<video id="myVideo" autoplay="true" src="https://jf360videos.peopletech.cn/production/464f2fe20b1211ee83bef3d9bb3dfecd_1_video.mp4" width="320" height="240" controls>
</video>
4.2 使用video对象属性及方法
<script>
const myVideo = document.getElementById("myVideo");
console.log(myVideo)//输出当前video对象
console.log(myVideo.src)//输出当前播放src
console.log(myVideo.height)//输出video高度
console.log(myVideo.currentTime)//输出video播放时间当前时间
myVideo.currentTime = 15//设置video当前播放时间(应用播放上次视频记录)
myVideo.pause()//暂停视频的播放
</script>
五、扩展思路
看到这里你可以自己写几个按钮来分别控制video的播放暂停,快进n秒,修改音量等功能