码迷,mamicode.com
首页 > 其他好文 > 详细

前端小功能:video视频播放

时间:2020-07-13 18:36:21      阅读:88      评论:0      收藏:0      [点我收藏+]

标签:line   loading   css   ESS   初始化   彼岸   ebe   ber   sed   

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

 

 

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

前端小功能:video视频播放

标签:line   loading   css   ESS   初始化   彼岸   ebe   ber   sed   

原文地址:https://www.cnblogs.com/bore/p/13294449.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!