学习笔记---video标签属性以及API

一、标签属性

<video src="myvideo.mp4" height="400" autoplay controls muted poster="img.jpg">您的浏览器不支持video标签</video>
// controls 展示视频播放控制
// autoplay 自动播放
// muted 静音
// src 视频路径
// poster 封面地址
// loop 循环播放
// height 高度
// width 宽度 ---视频会强制保持宽高比，画面不会宽高自定义，但元素会

二、API

play() // 播放

$('#video').play()

pause() //暂停

$('#video').pause()

duration // 视频总长度（s）

var min = parseInt($('#video').duration / 60) // 获取视频分钟数
var sec = parseInt($('#video').duration % 60) // 获取视频秒数（<60s）
console.log('视频时长：' + min + '分' + sec + '秒')

currentTime // 设置/返回当前视频的长度（s）

console.log($('#video').currentTime); //获取
$('#video').currentTime += 3; //设置

src // 视频地址

$('#video').src // 获取
$('#video').src = 'new.mp4' // 设置

volume // 视频音量

$('#video').volume // 获取（0-1）
$('#video').volume = 0 // 设置

controls // 是否展示播放控件

$('#video').controls = true // js设置控件

muted // 是否静音

$('#video').muted= true // js设置静音

networkState // 返回当前网络状态 

$('#video').networkState // 0=未初始化；1=视频已选取好资源，但未使用网络；2=正在加载；3=未找到视频资源

currentSrc // 返回视频地址（视频加载完成）

$('#video').currentSrc // 视频当前地址，只能返回不能设置

ended // 返回视频是否播放结束（true、false）可以配合添加addEventListener

$('#video').addEventListener('ended', function() {

　　$('#video').play() // 视频播放结束后继续播放

})

loop // 设置/返回视频是否循环播放

$('#switch').onclock = function() {
　　if ($('#video').loop) {
        $('#video').loop = false
        $('#switch').innerHTML = '不循环'
    } else {
        $('#video').loop = true
        $('#switch').innerHTML = '循环'
    }
}

playbackRate // 设置或返回视频播放速度

$('#video').playbackRate // 获取播放速度
$('#video').playbackRate = 2 // 2倍速播放

timeupdate // 当目前播放位置更改

// 播放进度： 02:00/03:35
$('#video').addEventListener('timeupdate', function () {
  var totalMin = checkTime(parseInt($('#video').duration / 60))
  var totalSec = checkTime(parseInt($('#video').duration % 60))
  var nowMin = checkTime(parseInt($('#video').currentTime / 60))
  var nowSec = checkTime(parseInt($('#video').currentTime % 60))

  var totalTime = totalMin + ':' + totalSec
  var nowTime = nowMin + ':' + nowSec
  $('playTime').innerHTML = nowTime + '/' + totalTime
})

// 处理小于10的数字。前面加‘0’
var checkTime = function (timeData) {
  if (timeData < 10) {
    return '0' + timeData
  } else {
    return timeData
  }
}

readyState // 返回视频当前就绪状态

$('video').readyState // 视频就绪状态 0=没有关于视频就绪的信息；1=有数据但不足以支撑；2=当前可用，没有下一帧的数据；3=当前可用下一帧也准备就绪；4=可用数据已开始播放

seeked // 当用户跳跃到视频中的新位置，配合'on'使用

$('#video').onseeked = function() {
    console.log('拖动结束')
}

seeking // 当用户开始跳跃到视频中的新位置，配合'on'使用

$('#video').onseeking = function() {
    console.log('开始拖动')
}

volumechange // 当音量更改，配合'on'使用

$('#video').onvolumechange = function() {
    console.log('音量改变')
}

requestFullscreen // 全屏

$('#fullScreen').onclick = function() {
    // 谷歌的全屏
    if ($('#video').webkitRequestFullscreen ) {
        $('#video').webkitRequestFullscreen()
    // 火狐的全屏
    } else if ($('#video').mozRequestFullScreen) {
        $('#video').mozRequestFullScreen()
    }
}

load // 重新开始加载视频资源

// 使用场景：切换视频源后，重新加载视频播放器
$('#reloadVideo').onclick = function() {
    $('#video').src = 'new.mp4' // 修改视频源
    $('#video').load() // 重新加载视频播放器
}

canplay // 视频已准备就绪，可以播放

$('#video').addEventListener = ('canplay', function() {
　　console.log('视频准备就绪，可以播放') 
})

最后补充一个video.js

下载地址：Video.js最新v7.4.1版