前端小功能：video視頻播放

 

視頻的播放：
在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很強大，希望有完整的中文文檔。或者有人告訴我一下。

 

 

沒有終點，沒有彼岸，堅持就好，願歲月如初