区块链技术博客
www.b2bchain.cn

vue实战 实现视频类webapp:(十一) 视频列表上滑播放和下拉播放求职学习资料

本文介绍了vue实战 实现视频类webapp:(十一) 视频列表上滑播放和下拉播放求职学习资料,有助于帮助完成毕业设计以及求职,是一篇很好的资料。

对技术面试,学习经验等有一些体会,在此分享。

本章节包含的内容

  • 视频列表上滑时,暂停正在播放的视频,自动播放下一个视频
  • 视频列表下拉时,暂停正在播放的视频,自动播放上一个视频

本节实现的效果

vue实战 实现视频类webapp:(十一) 视频列表上滑播放和下拉播放
移动端h5想要自动播放视频,必须要用户手动点击下
自动播放相关链接

实现这个功能的核心

  • 通过swiper提供的api
    • slidePrevTransitionStart 上滑方法
    • slideNextTransitionStart 下拉方法
  • 还要知道当前正在播放的视频是videoList中data数组中的哪一个,然后在父组件VideoList组件内调用子组件video中的 play()/stop() 实现视频的自动播放与暂停

videos.vue 代码如下

  • 在methods中声明两个方法,play播放方法、stop暂停方法,控制视频的播放与暂停
    • play 播放方法
    • stop 暂停方法
<template>   <div class="videos">     <video-player class="video-player vjs-custom-skin"                   ref="videoPlayer"                   :playsinline="true"                   :options="playerOptions"     ></video-player>   </div> </template>  <script>  export default {   name: 'Videos',   props: ['video', 'index'], //  video 是数据 index标识自动播放第一个视频   data() {     return {       playerOptions: {         autoplay: false, // 如果true,浏览器准备好时开始回放。         muted: true, // 默认情况下将会消除任何音频。         loop: true, // 导致视频一结束就重新开始。         preload: 'auto',         fluid: true, // 当true时,Video.js player将拥有流体大小。换句话说,它将按比例缩放以适应其容器。         sources: [           {             src: this.video.url,             type: 'video/mp4', // 类型           },         ],         width: document.documentElement.clientWidth,         notSupportedMessage: '此视频暂无法播放,请稍后再试', // 允许覆盖Video.js无法播放媒体源时显示的默认信息。         controlBar: false,       },       playing: true, // 用于判断 当前视频是否为播放状态       playBtn: '',     };   },   created() {     this.autoPlayAction();   },   methods: {     playOrStop() {       if (this.playing) {         this.$refs.videoPlayer.player.pause(); // 如果视频处于播放状态 则点击时 暂停此视频的播放         this.playing = false; // 设置播放标识为未播放       } else {         this.$refs.videoPlayer.player.play(); // 如果视频处于暂停状态 则点击时 继续视频的播放         this.playing = true; // 设置播放标识为正在播放       }     },      //  自动播放第一个视频     autoPlayAction() {       if (this.index === 0) {         this.playerOptions.autoplay = true;       }     },     // 播放事件     play() {       this.$refs.videoPlayer.player.play();       this.playing = true;     },     // 暂停事件     stop() {       this.$refs.videoPlayer.player.pause();       this.playing = false;     },   },  }; </script>  <style lang="less">   .videos {     position: relative;      /deep/ .vjs-big-play-button {       position: absolute;       width: 80px;       height: 80px;       border: none;       background-color: transparent;       content: none;       left: 50%;       top: 50%;       transform: translate(-50%, -50%);       .vjs-icon-placeholder {         font-size: 100px;         color: rgba(255, 255, 255, 0.7);       }     }     /deep/ .video-js {       height: calc(100vh - 50px);     }   } </style>

VideoList.vue 代码如下

  • 在methods属性声明两个方法
    • nextVideo:用户上滑时暂停当前正在播放的视频并自动播放下一个视频
    • preVideo: 用户下拉时暂停当前正在播放的视频并自动播放上一个视频
      “` js

本章节包含的内容

  • 视频列表上滑时,暂停正在播放的视频,自动播放下一个视频
  • 视频列表下拉时,暂停正在播放的视频,自动播放上一个视频

本节实现的效果

vue实战 实现视频类webapp:(十一) 视频列表上滑播放和下拉播放
移动端h5想要自动播放视频,必须要用户手动点击下
自动播放相关链接

实现这个功能的核心

  • 通过swiper提供的api
    • slidePrevTransitionStart 上滑方法
    • slideNextTransitionStart 下拉方法
  • 还要知道当前正在播放的视频是videoList中data数组中的哪一个,然后在父组件VideoList组件内调用子组件video中的 play()/stop() 实现视频的自动播放与暂停

videos.vue 代码如下

  • 在methods中声明两个方法,play播放方法、stop暂停方法,控制视频的播放与暂停
    • play 播放方法
    • stop 暂停方法
<template>   <div class="videos">     <video-player class="video-player vjs-custom-skin"                   ref="videoPlayer"                   :playsinline="true"                   :options="playerOptions"     ></video-player>   </div> </template>  <script>  export default {   name: 'Videos',   props: ['video', 'index'], //  video 是数据 index标识自动播放第一个视频   data() {     return {       playerOptions: {         autoplay: false, // 如果true,浏览器准备好时开始回放。         muted: true, // 默认情况下将会消除任何音频。         loop: true, // 导致视频一结束就重新开始。         preload: 'auto',         fluid: true, // 当true时,Video.js player将拥有流体大小。换句话说,它将按比例缩放以适应其容器。         sources: [           {             src: this.video.url,             type: 'video/mp4', // 类型           },         ],         width: document.documentElement.clientWidth,         notSupportedMessage: '此视频暂无法播放,请稍后再试', // 允许覆盖Video.js无法播放媒体源时显示的默认信息。         controlBar: false,       },       playing: true, // 用于判断 当前视频是否为播放状态       playBtn: '',     };   },   created() {     this.autoPlayAction();   },   methods: {     playOrStop() {       if (this.playing) {         this.$refs.videoPlayer.player.pause(); // 如果视频处于播放状态 则点击时 暂停此视频的播放         this.playing = false; // 设置播放标识为未播放       } else {         this.$refs.videoPlayer.player.play(); // 如果视频处于暂停状态 则点击时 继续视频的播放         this.playing = true; // 设置播放标识为正在播放       }     },      //  自动播放第一个视频     autoPlayAction() {       if (this.index === 0) {         this.playerOptions.autoplay = true;       }     },     // 播放事件     play() {       this.$refs.videoPlayer.player.play();       this.playing = true;     },     // 暂停事件     stop() {       this.$refs.videoPlayer.player.pause();       this.playing = false;     },   },  }; </script>  <style lang="less">   .videos {     position: relative;      /deep/ .vjs-big-play-button {       position: absolute;       width: 80px;       height: 80px;       border: none;       background-color: transparent;       content: none;       left: 50%;       top: 50%;       transform: translate(-50%, -50%);       .vjs-icon-placeholder {         font-size: 100px;         color: rgba(255, 255, 255, 0.7);       }     }     /deep/ .video-js {       height: calc(100vh - 50px);     }   } </style>

VideoList.vue 代码如下

  • 在methods属性声明两个方法
    • nextVideo:用户上滑时暂停当前正在播放的视频并自动播放下一个视频
    • preVideo: 用户下拉时暂停当前正在播放的视频并自动播放上一个视频
      “` js

本章节包含的内容

  • 视频列表上滑时,暂停正在播放的视频,自动播放下一个视频
  • 视频列表下拉时,暂停正在播放的视频,自动播放上一个视频

本节实现的效果

vue实战 实现视频类webapp:(十一) 视频列表上滑播放和下拉播放
移动端h5想要自动播放视频,必须要用户手动点击下
自动播放相关链接

实现这个功能的核心

  • 通过swiper提供的api
    • slidePrevTransitionStart 上滑方法
    • slideNextTransitionStart 下拉方法
  • 还要知道当前正在播放的视频是videoList中data数组中的哪一个,然后在父组件VideoList组件内调用子组件video中的 play()/stop() 实现视频的自动播放与暂停

videos.vue 代码如下

  • 在methods中声明两个方法,play播放方法、stop暂停方法,控制视频的播放与暂停
    • play 播放方法
    • stop 暂停方法
<template>   <div class="videos">     <video-player class="video-player vjs-custom-skin"                   ref="videoPlayer"                   :playsinline="true"                   :options="playerOptions"     ></video-player>   </div> </template>  <script>  export default {   name: 'Videos',   props: ['video', 'index'], //  video 是数据 index标识自动播放第一个视频   data() {     return {       playerOptions: {         autoplay: false, // 如果true,浏览器准备好时开始回放。         muted: true, // 默认情况下将会消除任何音频。         loop: true, // 导致视频一结束就重新开始。         preload: 'auto',         fluid: true, // 当true时,Video.js player将拥有流体大小。换句话说,它将按比例缩放以适应其容器。         sources: [           {             src: this.video.url,             type: 'video/mp4', // 类型           },         ],         width: document.documentElement.clientWidth,         notSupportedMessage: '此视频暂无法播放,请稍后再试', // 允许覆盖Video.js无法播放媒体源时显示的默认信息。         controlBar: false,       },       playing: true, // 用于判断 当前视频是否为播放状态       playBtn: '',     };   },   created() {     this.autoPlayAction();   },   methods: {     playOrStop() {       if (this.playing) {         this.$refs.videoPlayer.player.pause(); // 如果视频处于播放状态 则点击时 暂停此视频的播放         this.playing = false; // 设置播放标识为未播放       } else {         this.$refs.videoPlayer.player.play(); // 如果视频处于暂停状态 则点击时 继续视频的播放         this.playing = true; // 设置播放标识为正在播放       }     },      //  自动播放第一个视频     autoPlayAction() {       if (this.index === 0) {         this.playerOptions.autoplay = true;       }     },     // 播放事件     play() {       this.$refs.videoPlayer.player.play();       this.playing = true;     },     // 暂停事件     stop() {       this.$refs.videoPlayer.player.pause();       this.playing = false;     },   },  }; </script>  <style lang="less">   .videos {     position: relative;      /deep/ .vjs-big-play-button {       position: absolute;       width: 80px;       height: 80px;       border: none;       background-color: transparent;       content: none;       left: 50%;       top: 50%;       transform: translate(-50%, -50%);       .vjs-icon-placeholder {         font-size: 100px;         color: rgba(255, 255, 255, 0.7);       }     }     /deep/ .video-js {       height: calc(100vh - 50px);     }   } </style>

VideoList.vue 代码如下

  • 在methods属性声明两个方法
    • nextVideo:用户上滑时暂停当前正在播放的视频并自动播放下一个视频
    • preVideo: 用户下拉时暂停当前正在播放的视频并自动播放上一个视频
      “` js

部分转自互联网,侵权删除联系

赞(0) 打赏
部分文章转自网络,侵权联系删除b2bchain区块链学习技术社区 » vue实战 实现视频类webapp:(十一) 视频列表上滑播放和下拉播放求职学习资料
分享到: 更多 (0)

评论 抢沙发

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址

b2b链

联系我们联系我们