• 售前

  • 售后

热门帖子
入门百科

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

[复制链接]
北京愤怒羔羊猩 显示全部楼层 发表于 2021-10-25 20:47:13 |阅读模式 打印 上一主题 下一主题
最近的项目中需要实现视频断点续播的功能,一听到这个功能。心田方张了..但却又有点小窃喜,小懵乱。抱着求学态度去寻衅一下。
1.安装插件
  1. npm install vue-video-player --save
复制代码
2.Main.js 引入组件
  1. import VideoPlayer from 'vue-video-player'
  2. require('video.js/dist/video-js.css')
  3. require('vue-video-player/src/custom-theme.css')
  4. Vue.use(VideoPlayer)
复制代码
3.页面使用组件
  1. <el-tree :data="ChapterOptions"
  2.      :props="defaultProps"
  3.      node-key='id'
  4.      highlight-current
  5.      :filter-node-method="filterNode"
  6.      ref="tree"
  7.      default-expand-all
  8.      @node-click="handleNodeClick" />
  9. <video-player ref="videoPlayer"
  10.         class="video-player vjs-custom-skin"
  11.         style="width: 1000px;height: 576px;display: inline-flex"
  12.         :playsinline="true"
  13.         :options="playerOptions"
  14.         @pause="onPlayerPause($event)"
  15.         @ended="onPlayerEnded($event)"
  16.         @play="onPlayerPlay($event)"
  17.         @timeupdate="onPlayerTimeupdate($event)"
  18.         @ready="playerReadied"
  19.     />
  20. <script>
  21. import { videoPlayer } from 'vue-video-player'
  22. import 'video.js/dist/video-js.css'
  23. import 'vue-video-player/src/custom-theme.css'
  24. import { treeselect } from "@/api//driver/videoChapter";
  25. import Treeselect from "@riophae/vue-treeselect";
  26. import "@riophae/vue-treeselect/dist/vue-treeselect.css";
  27. export default {
  28. name: "videoPlayer",
  29. components: { Treeselect,videoPlayer },
  30. data() {
  31. return {
  32.   //用户信息
  33.   user:{},
  34.   //===============================
  35.   paused: true,
  36.   learningDuration: {
  37.   userId: '', //用户id
  38.   chapterId:'',//章节id
  39.   timeLog: '', //视频观看时长
  40.   },
  41.   playerOptions: {
  42.   playbackRates: [0.5, 1.0, 1.5, 2.0], //播放速度
  43.   autoplay: false, // 如果true,浏览器准备好时开始回放。
  44.   muted: false, // 默认情况下将会消除任何音频。
  45.   loop: false, // 导致视频一结束就重新开始。
  46.   preload: 'auto', // 建议浏览器在<video>加载元素后是否应该开始下载视频数据。auto浏览器选择最佳行为,立即开始加载视频(如果浏览器支持)
  47.   language: 'zh-CN',
  48.   aspectRatio: '16:9', // 将播放器置于流畅模式,并在计算播放器的动态大小时使用该值。值应该代表一个比例 - 用冒号分隔的两个数字(例如"16:9"或"4:3")
  49.   fluid: true, // 当true时,Video.js player将拥有流体大小。换句话说,它将按比例缩放以适应其容器。
  50.   sources: [
  51.    {
  52.    type: 'video/mp4', // 这里的种类支持很多种:基本视频格式、直播、流媒体等,具体可以参看git网址项目
  53.    src: ''// url地址
  54.    }
  55.   ],
  56.   hls: true,
  57.   poster: '', // 你的封面地址
  58.   width: document.documentElement.clientWidth, // 播放器宽度
  59.   notSupportedMessage: '此视频暂无法播放,请稍后再试', // 允许覆盖Video.js无法播放媒体源时显示的默认信息。
  60.   controlBar: {
  61.    //当前时间和持续时间的分隔符
  62.    timeDivider: true,
  63.    //显示持续时间
  64.    durationDisplay: true,
  65.    //是否显示剩余时间功能
  66.    remainingTimeDisplay: false,
  67.    //全屏按钮
  68.    fullscreenToggle: true
  69.   }
  70.   }
  71. };
  72. },
  73. computed: {
  74. player() {
  75.   return this.$refs.videoPlayer.player//自定义播放
  76. }
  77. },
  78. mounted () {
  79. this.timer = setInterval(this.putLearningObj, 3000)
  80. },
  81. destroyed () {
  82. // 如果定时器在运行则关闭
  83. if (this.timer) {
  84.   clearInterval(this.timer)
  85.   }
  86. },
  87. methods: {
  88. //用户信息
  89. getUser() {
  90.   getUserProfile().then(response => {
  91.   this.user = response.data;
  92.   this.learningDuration.userId = this.user.userId
  93.   });
  94. },
  95.   //============================
  96. fullScreen() {
  97.   const player = this.$refs.videoPlayer.player
  98.   player.requestFullscreen()//调用全屏api方法
  99.   player.isFullscreen(true)
  100.   player.play()
  101. },
  102. onPlayerPlay(player) {
  103.   this.paused = false
  104.   // player.play()
  105. },
  106. onPlayerPause (player) {
  107.   this.paused = true
  108.   // console.log('onPlayerPause!', player)
  109. },
  110. onPlayerEnded (player) {
  111.   this.paused = false;
  112.   // clearInterval(this.timer);
  113. },
  114. //当前播放位置发生变化时触发。
  115. onPlayerTimeupdate (player) {
  116.   // console.log(' onPlayerTimeupdate!', this.timeLog)
  117. },
  118. /* 设置视频进度 */
  119. playerReadied: function (player) {
  120. },
  121. };
  122. </script>
复制代码
上面的 src视频地址可以换成具体的地址串,也能换成后台的地址串,由于我的是章节树以是我和章节id进行了关联
  1. /** 查询部门下拉树结构 */
  2. getTreeselect() {
  3.   treeselect().then((response) => {
  4.   //封面
  5.   var img = '';
  6.   this.ChapterOptions = response.data;
  7.   for (let i = 0; i <this.ChapterOptions.length ; i++) {
  8.    this.videoName = this.ChapterOptions[0].children[0].chapterName
  9.    this.videoIntroduce = this.ChapterOptions[0].children[0].chapterIntroduce
  10.    this.VideoUrl = JSON.parse(this.ChapterOptions[0].children[0].videoAddress)
  11.    img = JSON.parse(this.ChapterOptions[0].children[0].imageAddress)
  12.    //初始化封面
  13.    for (let j = 0; j <img.length ; j++) {
  14.    this.playerOptions.poster =img[0];
  15.    }
  16.    //初始化第一个章节视频
  17.    for (let j = 0; j <this.VideoUrl.length ; j++) {
  18.    this.playerOptions.sources[0].src = this.VideoUrl[0]
  19.    }
  20.    //初始化章节
  21.    this.learningDuration.chapterId = this.ChapterOptions[0].children[0].id;
  22.    //默认高亮第一个章节节点
  23.    this.$nextTick(()=>{
  24.    this.$refs.tree.setCurrentKey(this.ChapterOptions[0].children[0].id);
  25.    })
  26.   }
  27.   });
  28. },
  29. // 筛选节点
  30. filterNode(value, data) {
  31.   if (!value) return true;
  32.   return data.label.indexOf(value) !== -1;
  33. },
  34. // 节点单击事件
  35. handleNodeClick(data) {
  36.   // console.log(data)
  37.   var img = '';
  38.   //刷新原视频, 原封面
  39.   this.playerOptions.sources[0].src = '';
  40.   this.playerOptions.poster = '';
  41.   //转换视频
  42.   this.VideoUrl= JSON.parse(data.videoAddress);
  43.   // console.log("this.VideoUrl")
  44.   for (let i = 0; i <this.VideoUrl.length ; i++) {
  45.   this.playerOptions.sources[0].src = this.VideoUrl[0];
  46.   }
  47.   img = JSON.parse(data.imageAddress);
  48.   for (let i = 0; i <img.length ; i++) {
  49.   this.playerOptions.poster = img[0];
  50.   }
  51.   // console.log("this.playerOptions.sources[0].src")
  52.   // console.log(this.playerOptions.sources[0].src)
  53.   //章节介绍
  54.   this.videoIntroduce = data.chapterIntroduce;
  55.   //章节名称
  56.   this.videoName = data.chapterName;
  57.   //章节id
  58.   this.learningDuration.chapterId = data.id
  59.   // console.log(this.videoIntroduce)
  60. },
复制代码
4.进度生存
接下来就是 生存视频的进度条了,通过打印发现onPlayerTimeupdate可获取到视频的进度,故采取定时器 每3秒触发一次数据交互
  1. computed: {
  2. player() {
  3.   return this.$refs.videoPlayer.player//自定义播放
  4. }
  5. },
  6. mounted () {
  7. this.timer = setInterval(this.putLearningObj, 3000)
  8. },
  9. destroyed () {
  10. // 如果定时器在运行则关闭
  11. if (this.timer) {
  12.   clearInterval(this.timer)
  13.   }
  14. },
  15. methods: {  
  16. putLearningObj () {
  17.   if (!this.paused) {
  18.   //保存视频进度
  19.   saveTime(this.learningDuration)
  20.   console.log('putLearningObj ~~~~~~~~~')
  21.   }
  22. },
  23. //当前播放位置发生变化时触发。
  24. onPlayerTimeupdate (player) {
  25. this.learningDuration.timeLog = player.cache_.currentTime
  26.   // console.log(' onPlayerTimeupdate!', this.timeLog)
  27. },
  28. },
复制代码
saveTime是我自界说的与后端交互的方法。(可自行界说)
  1. // 保存视频进度
  2. export function saveTime(data) {
  3. return request({
  4. url: '/***/****/***/',
  5. method: 'put',
  6. data: data
  7. })
  8. }
复制代码
那么到了这一步 进度就能生存下来了
4.进度规复
想要规复进度,就必须在视频播放前把 生存进度下来的设置到视频当中,通过打印可以看出playerReadied 可以设置
  1. /* 设置视频进度 */
  2. playerReadied: function (player) {
  3. //可在此调用后台交互方法
  4. ...
  5. player.currentTime(this.learningDuration.timeLog)
  6. },
复制代码
到此 进度可以 规复了 大功告成!。至于后台交互数据 需求不一样,代码也就没有贴出来。

到此这篇关于vue-video-player 断点续播的文章就先容到这了,更多相关vue video player 断点续播内容请搜索草根技术分享以前的文章或继承欣赏下面的相关文章盼望各人以后多多支持草根技术分享!

本帖子中包含更多资源

您需要 登录 才可以下载或查看,没有帐号?立即注册

x

帖子地址: 

回复

使用道具 举报

分享
推广
火星云矿 | 预约S19Pro,享500抵1000!
您需要登录后才可以回帖 登录 | 立即注册

本版积分规则

草根技术分享(草根吧)是全球知名中文IT技术交流平台,创建于2021年,包含原创博客、精品问答、职业培训、技术社区、资源下载等产品服务,提供原创、优质、完整内容的专业IT技术开发社区。
  • 官方手机版

  • 微信公众号

  • 商务合作