前端小功能：video视频播放

Posted 2020-12-17 bore

视频的播放：
在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很强大，希望有完整的中文文档。或者有人告诉我一下。

 

 

没有终点，没有彼岸，坚持就好，愿岁月如初