liveplayer

npm i @liveqing/liveplayer -S

  

   

    

     

    
    

     

      <template>
     
    
   

    

     

    
    

     
  <div class="live-player">
     
    
   

    

     

    
    

     
 <div style="width:640px;height:360px;">
     
    
   

    

     

    
    

     
 <LivePlayer videoUrl="assets/video.mp4" />
     
    
   

    

     

    
    

     
 
     
    
   

    

     

    
    

     
 <LivePlayer 
     
    
   

    

     

    
    

     
 ref="livePlayer"  
     
    
   

    

     

    
    

     
 :videoUrl="videoUrl"
     
    
   

    

     

    
    

     

       @snapOutside="snapOutside" 
     
    
   

    

     

    
    

     
 fluent
     
    
   

    

     

    
    

     
 autoplay
     
    
   

    

     

    
    

     
 live
     
    
   

    

     

    
    

     
 stretch
     
    
   

    

     

    
    

     

       />
     
    
   

    

     

    
    

     
 </div>
     
    
   

    

     

    
    

     
 <ul>
     
    
   

    

     

    
    

     
 <li><a @click="pause">暂停</a></li>
     
    
   

    

     

    
    

     
 <li><a @click="play">播放</a></li>
     
    
   

    

     

    
    

     
 <li><a @click="snap">截图数据</a></li>
     
    
   

    

     

    
    

     
 </ul>
     
    
   

    

     

    
    

     
  </div>
     
    
   

    

     

    
    

     

      <template>
     
    
   

    

     

    
    

     

      <script>
     
    
   

    

     

    
    

     

      import LivePlayer from '@liveqing/liveplayer'
     
    
   

    

     

    
    

     

      export default {
     
    
   

    

     

    
    

     
  components: {
     
    
   

    

     

    
    

     

       LivePlayer
     
    
   

    

     

    
    

     

        },
     
    
   

    

     

    
    

     

        data() {
     
    
   

    

     

    
    

     
 return {
     
    
   

    

     

    
    

     
 videoUrl: 'rtmp://live.hkstv.hk.lxdns.com/live/hks2'
     
    
   

    

     

    
    

     

       }
     
    
   

    

     

    
    

     

        },
     
    
   

    

     

    
    

     
  methods: {
     
    
   

    

     

    
    

     
 // 播放
     
    
   

    

     

    
    

     
 play: function () {
     
    
   

    

     

    
    

     
 this.$refs.livePlayer.play();
     
    
   

    

     

    
    

     

       },
     
    
   

    

     

    
    

     
 // 暂停
     
    
   

    

     

    
    

     
 pause: function () {
     
    
   

    

     

    
    

     
 this.$refs.livePlayer.pause();
     
    
   

    

     

    
    

     

       },
     
    
   

    

     

    
    

     
 // 外部API获取快照
     
    
   

    

     

    
    

     
 snap: function () {
     
    
   

    

     

    
    

     
 this.$refs.livePlayer.snap();
     
    
   

    

     

    
    

     

       },
     
    
   

    

     

    
    

     
 // 外部快照回调
     
    
   

    

     

    
    

     
 snapOutside: function (snapData) {
     
    
   

    

     

    
    

     
 console.log(snapData)
     
    
   

    

     

    
    

     

       }
     
    
   

    

     

    
    

     

        }
     
    
   

    

     

    
    

     

      }
     
    
   

    

     

    
    

     

      </script>
     
    
  
 

# 文档地址
https://www.liveqing.com/docs/manuals/LivePlayer.html

# vue-cli集成示例
https://github.com/livegbs/liveplayer-vc

文章来源: blog.csdn.net，作者：网奇，版权归原作者所有，如需转载，请联系作者。

原文链接：blog.csdn.net/jacke121/article/details/113799812