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的tree组件
Dec 03 Vue.js
vue3.0自定义指令(drectives)知识点总结
Dec 27 Vue.js
vue 动态生成拓扑图的示例
Jan 03 Vue.js
如何在 Vue 表单中处理图片
Jan 26 Vue.js
vue3中的组件间通信
Mar 31 Vue.js
vue实现简单数据双向绑定
Apr 28 Vue.js
Vue全家桶入门基础教程
May 14 Vue.js
Vue中foreach数组与js中遍历数组的写法说明
Jun 05 Vue.js
Vue Element-ui表单校验规则实现
Jul 09 Vue.js
SSM VUE Axios详解
Oct 05 Vue.js
如何用vue实现网页截图你知道吗
Nov 17 Vue.js
详解Vue的列表渲染
Nov 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
PHP框架Laravel插件Pagination实现自定义分页
2020/04/22 PHP
javascript 中对象的继承〔转贴〕
2007/01/22 Javascript
Javascript之旅 对象的原型链之由来
2010/08/25 Javascript
JQuery对class属性的操作实现按钮开关效果
2013/10/11 Javascript
Javascript小技巧之生成html元素
2014/05/15 Javascript
JavaScript在浏览器标题栏上显示当前日期和时间的方法
2015/03/19 Javascript
深入解析AngularJS框架中$scope的作用与生命周期
2016/03/05 Javascript
Angular的Bootstrap(引导)和Compiler(编译)机制
2016/06/20 Javascript
浅谈JavaScript对象与继承
2016/07/10 Javascript
js判断radiobuttonlist的选中值显示/隐藏其它模块的实现方法
2016/08/25 Javascript
javascript checkbox/radio onchange不能兼容ie8处理办法
2017/06/13 Javascript
JavaScript仿微信(电话)联系人列表滑动字母索引实例讲解(推荐)
2017/08/16 Javascript
vue 界面刷新数据被清除 localStorage的使用详解
2018/09/16 Javascript
node.js 使用 net 模块模拟 websocket 握手进行数据传递操作示例
2020/02/11 Javascript
不刷新网页就能链接新的js文件方法总结
2020/03/01 Javascript
vue实现编辑器键盘抬起时内容跟随光标距顶位置向上滚动效果
2020/05/28 Javascript
python分割列表(list)的方法示例
2017/05/07 Python
python使用pycharm环境调用opencv库
2018/02/11 Python
简单实现Python爬取网络图片
2018/04/01 Python
pandas DataFrame 根据多列的值做判断,生成新的列值实例
2018/05/18 Python
Python查找第n个子串的技巧分享
2018/06/27 Python
Python使用pickle模块储存对象操作示例
2018/08/15 Python
详解Python中正则匹配TAB及空格的小技巧
2019/07/26 Python
flask框架json数据的拿取和返回操作示例
2019/11/28 Python
PyTorch 对应点相乘、矩阵相乘实例
2019/12/27 Python
python dict乱码如何解决
2020/06/07 Python
Keras loss函数剖析
2020/07/06 Python
django序列化时使用外键的真实值操作
2020/07/15 Python
关于python3.7安装matplotlib始终无法成功的问题的解决
2020/07/28 Python
html5-websocket基于远程方法调用的数据交互实现
2012/12/04 HTML / CSS
春秋航空官方网站:Spring Airlines
2017/09/27 全球购物
中专生职业生涯规划书范文
2014/01/10 职场文书
莫言诺贝尔获奖演讲稿
2014/05/21 职场文书
简单通用的简历自我评价
2014/09/21 职场文书
高中信息技术教学反思
2016/02/16 职场文书
MongoDB连接数据库并创建数据等使用方法
2021/11/27 MongoDB