1、video 属性
<video src="test.mp4" controls width="400" height="300"></video>
<video src="test.mp4" controls controlslist="nodownload" width="400" height="300"></video>
<video src="test.mp4" controls controlslist="nodownload nofullscreen" width="400" height="300"></video>
<video src="test.mp4" controls autoplay width="400" height="300"></video>
<video src="test.mp4" controls muted width="400" height="300"></video>
<video src="test.mp4" controls loop width="400" height="300"></video>
<video src="test.mp4" controls preload width="400" height="300"></video>
<video src="test.mp4" poster="poster.jpg" controls width="400" height="300"></video>
<video src="test.mp4" poster="poster.jpg" controls width="400" height="300" id="_volume"></video>
<script>
var video = document.getElementById('_volume')
video.volume = 2
</script>
<video src="test.mp4" poster="poster.jpg" controls width="400" height="300" id="_time"></video>
<script>
var video = document.getElementById('_time')
console.log(video.currentTime)
video.currentTime = 60
</script>
<video src="test.mp4" controls autoplay width="400" height="300" id="_src"></video>
<script>
var video = document.getElementById('_src')
console.log(video.src)
setTimeout(() => {
video.src = 'test-2.mp4'
}, 30000)
</script>
<video controls autoplay width="400" height="300" id="_source">
<source src="test3.mp4" type="video/mp4" />
<source src="test9.mp4" type="video/mp4" />
<source src="test-2.mp4" type="video/mp4" />
</video>
<script>
var video = document.getElementById('_source')
setTimeout(() => {
console.log(video.currentSrc)
}, 1000)
</script>
2、video 事件
<video src="test.mp4" controls width="400" height="300" id="video"></video>
<script>
var video = document.getElementById('video')
video.addEventListener('loadstart', function(e) {
console.log('提示视频的元数据已加载')
console.log(e)
console.log(video.duration)
})
video.addEventListener('durationchange', function(e) {
console.log('提示视频的时长已改变')
console.log(e)
console.log(video.duration)
})
video.addEventListener('loadedmetadata', function(e) {
console.log('提示视频的元数据已加载')
console.log(e)
})
video.addEventListener('loadeddata', function(e) {
console.log('提示当前帧的数据是可用的')
console.log(e)
})
video.addEventListener('progress', function(e) {
console.log('提示视频正在下载中')
console.log(e)
})
video.addEventListener('canplay', function(e) {
console.log('提示该视频已准备好开始播放')
console.log(e)
})
video.addEventListener('canplaythrough', function(e) {
console.log('提示视频能够不停顿地一直播放')
console.log(e)
})
video.addEventListener('play', function(e) {
console.log('提示该视频正在播放中')
console.log(e)
})
video.addEventListener('pause', function(e) {
console.log('暂停播放')
console.log(e)
})
video.addEventListener('seeking', function(e) {
console.log('开始移动进度条')
console.log(e)
})
video.addEventListener('seeked', function(e) {
console.log('进度条已经移动到了新的位置')
console.log(e)
})
video.addEventListener('waiting', function(e) {
console.log('视频加载等待')
console.log(e)
})
video.addEventListener('playing', function(e) {
console.log('playing')
console.log(e)
})
video.addEventListener('timeupdate', function(e) {
console.log('timeupdate')
console.log(e)
})
video.addEventListener('ended', function(e) {
console.log('视频播放完了')
console.log(e)
})
video.addEventListener('error', function(e) {
console.log('视频出错了')
console.log(e)
})
video.addEventListener('volumechange', function(e) {
console.log('volumechange')
console.log(e)
})
video.addEventListener('stalled', function(e) {
console.log('stalled')
console.log(e)
})
video.addEventListener('ratechange', function(e) {
console.log('ratechange')
console.log(e)
})
</script>
如图: