vue vue-video-player 利用弹出框实现视频播放

最新推荐文章于 2024-07-22 14:57:33 发布

fj101229

最新推荐文章于 2024-07-22 14:57:33 发布

阅读量3.4w

点赞数 6

本文链接：https://blog.csdn.net/fj101229/article/details/80844417

版权

本文介绍了如何在Vue项目中使用vue-video-player组件，并通过弹出框控制视频播放。在main.js中引入组件，然后在Player组件中监听弹出框的关闭状态以暂停播放。当弹出框关闭时，通过状态传递来暂停视频并清空videoUrl，确保再次打开时能从头开始播放。

摘要由CSDN通过智能技术生成

一、在main.js 引入vue-video-player

 
  import 
  VideoPlayer 
  from 
  'vue-video-player' 
 
 
  Vue. 
  use( 
  VideoPlayer) 
 

二、Player组件

 
  < 
  template 
  > 
 
  < 
  div 
  class= 
  "container" 
  > 
 
  < 
  div 
  class= 
  "player" 
  > 
 
  < 
  video-player 
  class= 
  "video-player vjs-custom-skin" 
 
  ref= 
  "videoPlayer" 
 
  :playsinline=" 
  false" 
 
  :options=" 
  playerOptions" 
 
  @play=" 
  onPlayerPlay( 
  $event)" //监听播放 
 
  @pause=" 
  onPlayerPause( 
  $event)" //监听暂停 
 
  @statechanged=" 
  playerStateChanged( 
  $event)" //监听播放状态改变 
 
  > 
 
  </ 
  video-player 
  > 
 
  </ 
  div 
  >