vue-video-player 断点续播的实现


Posted in Vue.js onFebruary 01, 2021

最近的项目中需要实现视频断点续播的功能,一听到这个功能。内心方张了..但却又有点小窃喜,小懵乱。抱着求学态度去挑战一下。

1.安装插件

npm install vue-video-player --save

2.Main.js 引入组件

import VideoPlayer from 'vue-video-player'
require('video.js/dist/video-js.css')
require('vue-video-player/src/custom-theme.css')
Vue.use(VideoPlayer)

3.页面使用组件

<el-tree :data="ChapterOptions"
     :props="defaultProps"
     node-key='id'
     highlight-current
     :filter-node-method="filterNode"
     ref="tree"
     default-expand-all
     @node-click="handleNodeClick" />
<video-player ref="videoPlayer"
        class="video-player vjs-custom-skin"
        style="width: 1000px;height: 576px;display: inline-flex"
        :playsinline="true"
        :options="playerOptions"
        @pause="onPlayerPause($event)"
        @ended="onPlayerEnded($event)"
        @play="onPlayerPlay($event)"
        @timeupdate="onPlayerTimeupdate($event)"
        @ready="playerReadied"
    />
<script>
import { videoPlayer } from 'vue-video-player'
import 'video.js/dist/video-js.css'
import 'vue-video-player/src/custom-theme.css'
import { treeselect } from "@/api//driver/videoChapter";
import Treeselect from "@riophae/vue-treeselect";
import "@riophae/vue-treeselect/dist/vue-treeselect.css";
export default {
 name: "videoPlayer",
 components: { Treeselect,videoPlayer },
 data() {
 return {
  //用户信息
  user:{},
  //===============================
  paused: true,
  learningDuration: {
  userId: '', //用户id
  chapterId:'',//章节id
  timeLog: '', //视频观看时长
  },
 
  playerOptions: {
  playbackRates: [0.5, 1.0, 1.5, 2.0], //播放速度
  autoplay: false, // 如果true,浏览器准备好时开始回放。
  muted: false, // 默认情况下将会消除任何音频。
  loop: false, // 导致视频一结束就重新开始。
  preload: 'auto', // 建议浏览器在<video>加载元素后是否应该开始下载视频数据。auto浏览器选择最佳行为,立即开始加载视频(如果浏览器支持)
  language: 'zh-CN',
  aspectRatio: '16:9', // 将播放器置于流畅模式,并在计算播放器的动态大小时使用该值。值应该代表一个比例 - 用冒号分隔的两个数字(例如"16:9"或"4:3")
  fluid: true, // 当true时,Video.js player将拥有流体大小。换句话说,它将按比例缩放以适应其容器。
  sources: [
   {
   type: 'video/mp4', // 这里的种类支持很多种:基本视频格式、直播、流媒体等,具体可以参看git网址项目
   src: ''// url地址
   }
  ],
  hls: true,
  poster: '', // 你的封面地址
  width: document.documentElement.clientWidth, // 播放器宽度
  notSupportedMessage: '此视频暂无法播放,请稍后再试', // 允许覆盖Video.js无法播放媒体源时显示的默认信息。
  controlBar: {
   //当前时间和持续时间的分隔符
   timeDivider: true,
   //显示持续时间
   durationDisplay: true,
   //是否显示剩余时间功能
   remainingTimeDisplay: false,
   //全屏按钮
   fullscreenToggle: true
  }
  }
 };
},
computed: {
 player() {
  return this.$refs.videoPlayer.player//自定义播放
 }
 },
mounted () {
 this.timer = setInterval(this.putLearningObj, 3000)
 },
destroyed () {
 // 如果定时器在运行则关闭
 if (this.timer) {
  clearInterval(this.timer)
  }
 },
methods: {
 //用户信息
 getUser() {
  getUserProfile().then(response => {
  this.user = response.data;
  this.learningDuration.userId = this.user.userId
  });
 },
  //============================
 fullScreen() {
  const player = this.$refs.videoPlayer.player
  player.requestFullscreen()//调用全屏api方法
  player.isFullscreen(true)
  player.play()
 },
 onPlayerPlay(player) {
  this.paused = false
  // player.play()
 },
 onPlayerPause (player) {
  this.paused = true
  // console.log('onPlayerPause!', player)
 },
 onPlayerEnded (player) {
  this.paused = false;
  // clearInterval(this.timer);
 },
 //当前播放位置发生变化时触发。
 onPlayerTimeupdate (player) {
  // console.log(' onPlayerTimeupdate!', this.timeLog)
 },
 /* 设置视频进度 */
 playerReadied: function (player) {
 },
};
</script>

上面的 src视频地址可以换成具体的地址串,也能换成后台的地址串,因为我的是章节树所以我和章节id进行了关联

/** 查询部门下拉树结构 */
 getTreeselect() {
  treeselect().then((response) => {
  //封面
  var img = '';
  this.ChapterOptions = response.data;
  for (let i = 0; i <this.ChapterOptions.length ; i++) {
   this.videoName = this.ChapterOptions[0].children[0].chapterName
   this.videoIntroduce = this.ChapterOptions[0].children[0].chapterIntroduce
   this.VideoUrl = JSON.parse(this.ChapterOptions[0].children[0].videoAddress)
   img = JSON.parse(this.ChapterOptions[0].children[0].imageAddress)
   //初始化封面
   for (let j = 0; j <img.length ; j++) {
   this.playerOptions.poster =img[0];
   }
   //初始化第一个章节视频
   for (let j = 0; j <this.VideoUrl.length ; j++) {
   this.playerOptions.sources[0].src = this.VideoUrl[0]
   }
   //初始化章节
   this.learningDuration.chapterId = this.ChapterOptions[0].children[0].id;
   //默认高亮第一个章节节点
   this.$nextTick(()=>{
   this.$refs.tree.setCurrentKey(this.ChapterOptions[0].children[0].id);
   })
  }
  });
 },
 // 筛选节点
 filterNode(value, data) {
  if (!value) return true;
  return data.label.indexOf(value) !== -1;
 },
 // 节点单击事件
 handleNodeClick(data) {
  // console.log(data)
  var img = '';
  //刷新原视频, 原封面
  this.playerOptions.sources[0].src = '';
  this.playerOptions.poster = '';
  //转换视频
  this.VideoUrl= JSON.parse(data.videoAddress);
  // console.log("this.VideoUrl")
  for (let i = 0; i <this.VideoUrl.length ; i++) {
  this.playerOptions.sources[0].src = this.VideoUrl[0];
  }
  img = JSON.parse(data.imageAddress);
  for (let i = 0; i <img.length ; i++) {
  this.playerOptions.poster = img[0];
  }
  // console.log("this.playerOptions.sources[0].src")
  // console.log(this.playerOptions.sources[0].src)
  //章节介绍
  this.videoIntroduce = data.chapterIntroduce;
  //章节名称
  this.videoName = data.chapterName;
  //章节id
  this.learningDuration.chapterId = data.id
  // console.log(this.videoIntroduce)
 },

4.进度保存

接下来就是 保存视频的进度条了,通过打印发现onPlayerTimeupdate可获取到视频的进度,故采用定时器 每3秒触发一次数据交互

computed: {
 player() {
  return this.$refs.videoPlayer.player//自定义播放
 }
 },
 mounted () {
 this.timer = setInterval(this.putLearningObj, 3000)
 },
 destroyed () {
 // 如果定时器在运行则关闭
 if (this.timer) {
  clearInterval(this.timer)
  }
 },
methods: {  
putLearningObj () {
  if (!this.paused) {
  //保存视频进度
  saveTime(this.learningDuration)
  console.log('putLearningObj ~~~~~~~~~')
  }
 },
//当前播放位置发生变化时触发。
onPlayerTimeupdate (player) {
 this.learningDuration.timeLog = player.cache_.currentTime
  // console.log(' onPlayerTimeupdate!', this.timeLog)
 },
},

saveTime是我自定义的与后端交互的方法。(可自行定义)

// 保存视频进度
export function saveTime(data) {
 return request({
 url: '/***/****/***/',
 method: 'put',
 data: data
 })
}

那么到了这一步 进度就能保存下来了

4.进度恢复

想要恢复进度,就必须在视频播放前把 保存进度下来的设置到视频当中,通过打印可以看出playerReadied 可以设置

/* 设置视频进度 */
playerReadied: function (player) {
//可在此调用后台交互方法
...
player.currentTime(this.learningDuration.timeLog)
},

到此 进度可以 恢复了 大功告成!。至于后台交互数据 需求不一样,代码也就没有贴出来。

vue-video-player 断点续播的实现

到此这篇关于vue-video-player 断点续播的文章就介绍到这了,更多相关vue video player 断点续播内容请搜索三水点靠木以前的文章或继续浏览下面的相关文章希望大家以后多多支持三水点靠木!

Vue.js 相关文章推荐
vue开发chrome插件,实现获取界面数据和保存到数据库功能
Dec 01 Vue.js
在vue中动态修改css其中一个属性值操作
Dec 07 Vue.js
vue中如何自定义右键菜单详解
Dec 08 Vue.js
vue实现购物车的小练习
Dec 21 Vue.js
Vue.extend 登录注册模态框的实现
Dec 29 Vue.js
vue组件是如何解析及渲染的?
Jan 13 Vue.js
vue实现验证用户名是否可用
Jan 20 Vue.js
Vue中使用wangeditor富文本编辑的问题
Feb 07 Vue.js
vue 数据双向绑定的实现方法
Mar 04 Vue.js
一定要知道的 25 个 Vue 技巧
Nov 02 Vue.js
vue判断按钮是否可以点击
Apr 09 Vue.js
vue使用element-ui按需引入
May 20 Vue.js
Vite和Vue CLI的优劣
Jan 30 #Vue.js
如何使用RoughViz可视化Vue.js中的草绘图表
Jan 30 #Vue.js
vue监听键盘事件的相关总结
Jan 29 #Vue.js
Vue 实例中使用$refs的注意事项
Jan 29 #Vue.js
vue 项目@change多个参数传值多个事件的操作
Jan 29 #Vue.js
vue 实现click同时传入事件对象和自定义参数
Jan 29 #Vue.js
聊聊vue 中的v-on参数问题
Jan 29 #Vue.js
You might like
Protoss兵种介绍
2020/03/14 星际争霸
英雄试炼之肉山谷—引领RPG新潮流
2020/04/20 DOTA
Prototype最新版(1.5 rc2)使用指南(1)
2007/01/10 Javascript
Prototype 学习 Prototype对象
2009/07/12 Javascript
JS TextArea字符串长度限制代码集合
2012/10/31 Javascript
技术男用来对妹子表白的百度首页
2014/07/23 Javascript
兼容主流浏览器的JS复制内容到剪贴板
2014/12/12 Javascript
javascript运动详解
2015/07/06 Javascript
jQuery事件绑定on()与弹窗实现代码
2016/04/28 Javascript
javascript中获取class的简单实现
2016/07/12 Javascript
JS动态计算移动端rem的解决方案
2016/10/14 Javascript
JS触摸屏网页版仿app弹窗型滚动列表选择器/日期选择器
2016/10/30 Javascript
值得分享的Bootstrap Table使用教程
2016/11/23 Javascript
jQuery实现验证码功能
2017/03/17 Javascript
Vue下路由History模式打包后页面空白的解决方法
2018/06/29 Javascript
Vue中关闭弹窗组件时销毁并隐藏操作
2020/09/01 Javascript
nuxt静态部署打包相对路径操作
2020/11/06 Javascript
JavaScript中的Proxy对象
2020/11/27 Javascript
pymongo实现控制mongodb中数字字段做加法的方法
2015/03/26 Python
Python计算三角函数之asin()方法的使用
2015/05/15 Python
Python cookbook(数据结构与算法)让字典保持有序的方法
2018/02/18 Python
Python实现利用163邮箱远程关电脑脚本
2018/02/22 Python
在PyCharm下使用 ipython 交互式编程的方法
2019/01/17 Python
Python迭代器iterator生成器generator使用解析
2019/10/24 Python
PyTorch的torch.cat用法
2020/06/28 Python
Ubuntu 20.04安装Pycharm2020.2及锁定到任务栏的问题(小白级操作)
2020/10/29 Python
惠普加拿大在线商店:HP加拿大
2017/09/15 全球购物
建筑人员岗位职责
2013/12/25 职场文书
专业求职信撰写要诀
2014/02/18 职场文书
追悼会主持词
2014/03/20 职场文书
初中新生军训方案
2014/05/13 职场文书
关于运动会的广播稿50字
2014/10/17 职场文书
秋收起义观后感
2015/06/11 职场文书
2016继续教育研修日志
2015/11/13 职场文书
使用react+redux实现计数器功能及遇到问题
2021/06/02 Javascript
python 中yaml文件用法大全
2021/07/04 Python