bore
<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很强大,希望有完整的中文文档。或者有人告诉我一下。

 

 

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

分类:

技术点:

相关文章: