前端小功能：video視訊播放
阿新 • • 發佈：2020-07-13
視訊的播放：
在HTML5中定義了Video（視訊）標籤可用於實現視訊的播放， 標籤也可以在 HTML 頁面中嵌入多媒體元素， 標籤的也可以是在 HTML 頁面中嵌入多媒體元素。
在這裡主要使用：Video標籤
實現視訊播放：
<video width="320" height="240" controls>
<source src="movie.mp4" type="video/mp4">
<source src="movie.ogg" 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>具體的基本播放可以直接參考：菜鳥教程。
基本的播放屬性也可以直接參考：菜鳥教程video物件
進度條，自動播放，迴圈播放，播放暫停，都是OK的。
對播放器沒有要求，視訊源穩定的情況，直接使用原生的配置也就可以了。
如果有需求對視訊操作，比較跳幀，自定義進度條，倍速，播放片段等操作，用原生的擼就有點心累了。。。
video.js外掛，可以看一下文件
還有個小夥伴做了一個簡陋的中文版： video中文文件
文件還是必須看一下的，文件很強大，可以完成視訊的所有需求了
自定義video進度條
下面記錄一下vue使用的示例：
npm install video.js
然後載入指令碼樣式
import Video from 'video.js' import直接上程式碼'video.js/dist/video-js.css'
initVideo() { // 初始化視訊方法 const that = this that.myPlayer = Video( this.$refs.myVideo, { // 確定播放器是否具有使用者可以與之互動的控制元件。沒有控制元件，啟動視訊播放的唯一方法是使用autoplay屬性或通過Player API。 controls: false, poster: that.videoResult.ProgramData.CoverPath,// 建議瀏覽器是否應在<video>載入元素後立即開始下載視訊資料。 preload: 'auto', aspectRatio: '16:9', language: 'zh-CN' }, ) that.myPlayer.src({ type: 'video/mp4', src: that.videoResult.VideoUrl }) // 監聽播放器準備就緒 that.myPlayer.on('ready', function() { // 獲取全屏模式 // const VisFullscreen = myPlayer.isFullscreen() // 設定全屏模式 值bool // myPlayer.isFullscreen(true) }) // 監聽視訊載入完成 that.myPlayer.on('loadeddata', function() {
// 獲取視訊長度 that.videoDuration = that.formatTime(that.myPlayer.duration())
// 獲取點前播放幀 that.videoCurrentTime = that.formatTime(that.myPlayer.currentTime())
// 獲取當前倍速 that.videoPlaybackRate = that.myPlayer.playbackRate()
// 獲取是否靜音 that.videoMuted = that.myPlayer.muted()
// 獲取音量 that.videoVolume = parseInt(that.myPlayer.volume() * 100) that.myProgress() }) // 監聽視訊載入完成 能播放 that.myPlayer.on('canplay', function() { }) // 監聽視訊play that.myPlayer.on('play', function() { that.videoIsPlay = true }) // 監聽視訊pause that.myPlayer.on('pause', function() { that.videoIsPlay = false }) // 監聽視訊加載出錯 that.myPlayer.on('error', function(e) { // that.myPlayer.errorDisplay.close() that.$message.error('視訊載入失敗！') }) // 播放進度時間監聽 that.myPlayer.on('timeupdate', function() { if (that.isMousedown) return const progress = Number(((that.myPlayer.currentTime() / that.myPlayer.duration()) * 100).toFixed(2)) that.progress = _.cloneDeep(progress) that.videoCurrentTime = that.formatTime(that.myPlayer.currentTime()) that.pendingProgress(that.myPlayer.currentTime()) }) },
播放器載入
進度條事件：
progressMousedown(e) { const oE = e || event oE.stopPropagation() const that = this that.isMousedown = true const videoSlider = document.getElementById('video-slider') const videoPending = document.getElementById('video-pending') videoSlider.style.transition = 'none' videoPending.style.transition = '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 videoSlider.style.transition = 'all 0.3s ease' videoPending.style.transition = 'all 0.3s ease' that.handleJoin(joinVal) }, 100) } else { const duration = that.myPlayer.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 videoSlider.style.transition = 'all 0.3s ease' videoPending.style.transition = 'all 0.3s ease' that.handleJoin(joinVal) }, 100) } }, // slider sliderMousedown(e) { const oE = e || event oE.stopPropagation() const that = this const videoSlider = document.getElementById('video-slider') const videoPending = document.getElementById('video-pending') videoSlider.style.transition = 'none' videoPending.style.transition = 'none' // 禁用選擇 document.onselectstart = new Function('event.returnValue=false') const sliderOffsetX = oE.offsetX let isPlay = false if (!that.myPlayer.paused()) { isPlay = true that.handlePause() } document.onmousemove = function(ev) { 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() } document.onmouseup = function(ev) { /* 滑鼠放開清除事件 */ 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 = that.myPlayer.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) } document.onmousemove = null document.onmouseup = null document.onselectstart = null videoSlider.style.transition = 'all 0.3s ease' videoPending.style.transition = 'all 0.3s ease' if (isPlay) { that.handlePlay() } } return false // 相容firefox }
偏業務邏輯記錄一下
實現頁面展示一下：
video控制元件基本事件播放暫停，倍速，音量開關控制，進度條節點，進度條片段高亮，hover圖片，點選，拖拽，幾乎完美。。
video很強大，希望有完整的中文文件。或者有人告訴我一下。
沒有終點，沒有彼岸，堅持就好，願歲月如初