前端⼩功能：video视频播放
视频的播放：
在HTML5中定义了Video（视频）标签可⽤于实现视频的播放，标签也可以在 HTML 页⾯中嵌⼊多媒体元素，标签的也可以是在HTML 页⾯中嵌⼊多媒体元素。
在这⾥主要使⽤：Video标签
实现视频播放：
<video width="320" height="240" controls>
<source src="movie.mp4" type="video/mp4">
<source src="" type="video/ogg">
<source src="movie.webm" type="video/webm">
<object data="movie.mp4" width="320" height="240">
<embed src="movie.swf" width="320" height="240">
</object>
</video>
具体的基本播放可以直接参考：
基本的播放属性也可以直接参考：
进度条，⾃动播放，循环播放，播放暂停，都是OK的。
对播放器没有要求，视频源稳定的情况，直接使⽤原⽣的配置也就可以了。
如果有需求对视频操作，⽐较跳帧，⾃定义进度条，倍速，播放⽚段等操作，⽤原⽣的撸就有点⼼累了。。。
插件，可以看⼀下⽂档
还有个⼩伙伴做了⼀个简陋的中⽂版：
⽂档还是必须看⼀下的，⽂档很强⼤，可以完成视频的所有需求了
⾃定义video进度条
下⾯记录⼀下vue使⽤的⽰例：
npm  install video.js
然后加载脚本样式
import Video from 'video.js'
import 'video.js/dist/video-js.css'
直接上代码
initVideo() {
// 初始化视频⽅法
const that = this
pendingthis.$Video,
{
// 确定播放器是否具有⽤户可以与之交互的控件。没有控件，启动视频播放的唯⼀⽅法是使⽤autoplay属性或通过Player API。
controls: false,
poster: that.videoResult.ProgramData.CoverPath,
// 建议浏览器是否应在<video>加载元素后⽴即开始下载视频数据。
preload: 'auto',
aspectRatio: '16:9',
language: 'zh-CN'
},
)
// 监听播放器准备就绪
<('ready', function() {
// 获取全屏模式
// const VisFullscreen = myPlayer.isFullscreen()
// 设置全屏模式值bool
// myPlayer.isFullscreen(true)
})
// 监听视频加载完成
<('loadeddata', function() {
    　// 获取视频长度
that.videoDuration = that.Player.duration())
    　// 获取点前播放帧
that.videoCurrentTime = that.Player.currentTime())
    　// 获取当前倍速
that.videoPlaybackRate = Player.playbackRate()
    　// 获取是否静⾳
that.videoMuted = Player.muted()
    　// 获取⾳量
that.videoVolume = Player.volume() * 100)
})
// 监听视频加载完成能播放
<('canplay', function() {
})
// 监听视频play
<('play', function() {
that.videoIsPlay = true
})
// 监听视频pause
<('pause', function() {
that.videoIsPlay = false
})
// 监听视频加载出错
<('error', function(e) {
// Display.close()
that.$('视频加载失败！')
})
// 播放进度时间监听
<('timeupdate', function() {
if (that.isMousedown) return
const progress = Number(((Player.currentTime() / Player.duration()) * 100).toFixed(2))        that.progress = _.cloneDeep(progress)
that.videoCurrentTime = that.Player.currentTime())
that.Player.currentTime())
})
},
播放器加载
进度条事件：
progressMousedown(e) {
const oE = e || event
oE.stopPropagation()
const that = this
that.isMousedown = true
const videoSlider = ElementById('video-slider')
const videoPending = ElementById('video-pending')
ansition = 'none'
ansition = 'none'
if (that.smallProgress) {
const duration = that.smallEndFrame - that.smallStartFrame
let left = (((oE.pageX - that.progressLeft) / that.progressWidth) * 100).toFixed(2)
left = Math.min(Math.max(0, left), 100)
that.progress = left
const joinVal = duration * (left / 100) + that.smallStartFrame
setTimeout(() => {
that.isMousedown = false
ansition = 'all 0.3s ease'
ansition = 'all 0.3s ease'
that.handleJoin(joinVal)
}, 100)
} else {
const duration = Player.duration()
let left = (((oE.pageX - that.progressLeft) / that.progressWidth) * 100).toFixed(2)
left = Math.min(Math.max(0, left), 100)
that.progress = left
const joinVal = duration * (left / 100)
setTimeout(() => {
that.isMousedown = false
ansition = 'all 0.3s ease'
ansition = 'all 0.3s ease'
that.handleJoin(joinVal)
}, 100)
}
},
// slider
sliderMousedown(e) {
const oE = e || event
oE.stopPropagation()
const that = this
const videoSlider = ElementById('video-slider')
const videoPending = ElementById('video-pending')
ansition = 'none'
ansition = 'none'
// 禁⽤选择
const sliderOffsetX = oE.offsetX
let isPlay = false
if (!Player.paused()) {
isPlay = true
that.handlePause()
}
const oEvent = ev || event
let left = (((oEvent.pageX - sliderOffsetX - that.progressLeft + 5) / that.progressWidth) * 100).toFixed(2)
left = Math.min(Math.max(0, left), 100)
const cloneLeft = _.cloneDeep(left)
videoSlider.style.left = cloneLeft + '%'
videoPending.style.width = cloneLeft + '%'
// 更新data
// that.$set(that, 'progress', cloneLeft)
// 强制更新
// that.$forceUpdate()
}
/* ⿏标放开清除事件 */
const oEvent = ev || event
if (that.smallProgress) {
const duration = that.smallEndFrame - that.smallStartFrame
let left = (((oEvent.pageX - sliderOffsetX - that.progressLeft + 5) / that.progressWidth) * 100).toFixed(2)
left = Math.min(Math.max(0, left), 100)
that.progress = left
const joinVal = duration * (left / 100) + that.smallStartFrame
that.handleJoin(joinVal)
} else {
const duration = Player.duration()
let left = (((oEvent.pageX - sliderOffsetX - that.progressLeft + 5) / that.progressWidth) * 100).toFixed(2)
left = Math.min(Math.max(0, left), 100)
that.progress = left
const joinVal = duration * (left / 100)
that.handleJoin(joinVal)
}
ansition = 'all 0.3s ease'
ansition = 'all 0.3s ease'
if (isPlay) {
that.handlePlay()
}
}
return false// 兼容firefox
}
偏业务逻辑记录⼀下
实现页⾯展⽰⼀下：
video控件基本事件播放暂停，倍速，⾳量开关控制，进度条节点，进度条⽚段⾼亮，hover图⽚，点击，拖拽，⼏乎完美。。 video很强⼤，希望有完整的中⽂⽂档。或者有⼈告诉我⼀下。
没有终点，没有彼岸，坚持就好，愿岁⽉如初
没有终点，没有彼岸，坚持就好，愿岁⽉如初

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。