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

关注

VIP免费原创 2018-06-28 15:59:58 3.5w 阅读 AI 写同款· GEO 优化 ›

一、在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 
  > 
 
 
  </ 
  div 
  > 
 

最低0.47元/天解锁文章