vue中使用Alipayer,播放rtmp,m3u8,mp4视频, vue-alipayer-v2

假如此轮子对你有帮助,请顺手star一下吧.o(￣︶￣)o

1. npm i vue-aliplayer-v2 --save
2. or
3. yarn add vue-aliplayer-v2

1. 
   
   import VueAliplayerV2 from 'vue-aliplayer-v2';
2. 
   
   
   
   
3. 
   
   
   
   Vue.use(VueAliplayerV2);

1. 
   
   <template>
2. 
   
   
   
   <div id="app">
3. 
   
   
   
   <vue-aliplayer-v2
4. 
   
   
   
   @ready="handleReady"
5. 
   
   
   
   ref="VueAliplayerV2"
6. 
   
   
   
   id="player-1194076936807171180"
7. 
   
   
   
   :options="options" />
8. 
   
   
   
   <button @click="play()">播放</button>
9. 
   
   
   
   <button @click="pause()">暂停</button>
10. 
    
    
    
    <button @click="replay()">重播</button>
11. 
    
    
    
    <button @click="getCurrentTime()">播放时刻</button>
12. 
    
    
    
    </div>
13. 
    
    
    
    </template>
14. 
    
    
    
    <script>
15. 
    
    
    
    export default {
16. 
    
    
    
    data(){
17. 
    
    
    
    return {
18. 
    
    
    
    options: { //配置项
19. 
    
    
    
    source:'rtmp://182.112.15.258:1688/hls/1194076936807171180'
20. 
    
    
    
    }
21. 
    
    
    
    }
22. 
    
    
    
    },
23. 
    
    
    
    methods:{
24. 
    
    
    
    
25. 
    
    
    
    /**
26. 
    
    
    
    * 在这里需要注意的是  this.$refs 可能会返回是数组,或者对象,这个在用的时候需要注意一下.且因为是异步渲染dom,所以最好是在 this.$nextTick(()=>{ //todo }); 里面调用
27. 
    
    
    
    * 事件可以参考文档 https://help.aliyun.com/document_detail/125572.html?spm=a2c4g.11186623.6.1085.36fc6fc57WKZ5P#h2-u64ADu653Eu5668u4E8Bu4EF63
28. 
    
    
    
    */
29. 
    
    
    
    play(){
30. 
    
    
    
    this.$refs.VueAliplayerV2.play()
31. 
    
    
    
    },
32. 
    
    
    
    
33. 
    
    
    
    pause(){
34. 
    
    
    
    this.$refs.VueAliplayerV2.pause();
35. 
    
    
    
    },
36. 
    
    
    
    
37. 
    
    
    
    replay(){
38. 
    
    
    
    this.$refs.VueAliplayerV2.replay();
39. 
    
    
    
    },
40. 
    
    
    
    
41. 
    
    
    
    getCurrentTime(){
42. 
    
    
    
    this.$refs.VueAliplayerV2.getCurrentTime();
43. 
    
    
    
    },
44. 
    
    
    
    
45. 
    
    
    
    /**
46. 
    
    
    
    * 播放器事件回调
47. 
    
    
    
    */
48. 
    
    
    
    handleReady(e){
49. 
    
    
    
    console.log(`ready`,e);
50. 
    
    
    
    }
51. 
    
    
    
    }
52. 
    
    
    
    }
53. 
    
    
    
    </script>
54. 
    
    
    
    <style lang="less" scoped>
55. 
    
    
    
    * {
56. 
    
    
    
    margin: 0;
57. 
    
    
    
    padding: 0;
58. 
    
    
    
    }
59. 
    
    
    
    .player-btns{
60. 
    
    
    
    width: 800px;
61. 
    
    
    
    margin: 0 auto;
62. 
    
    
    
    display: flex;
63. 
    
    
    
    justify-content: space-between;
64. 
    
    
    
    span {
65. 
    
    
    
    margin: 0 auto;
66. 
    
    
    
    display: inline-block;
67. 
    
    
    
    padding: 5px 10px;
68. 
    
    
    
    width: 150px;
69. 
    
    
    
    height: 40px;
70. 
    
    
    
    line-height: 40px;
71. 
    
    
    
    border: 1px solid #eee;
72. 
    
    
    
    background: #e1e1e1;
73. 
    
    
    
    border-radius: 10px;
74. 
    
    
    
    text-align: center;
75. 
    
    
    
    margin: 20px auto;
76. 
    
    
    
    cursor: pointer;
77. 
    
    
    
    }
78. 
    
    
    
    }
79. 
    
    
    
    </style>

1. 
   
   props:{
2. 
   
   
   
   options: { //配置项
3. 
   
   
   
   required: false,
4. 
   
   
   
   type: [Object],
5. 
   
   
   
   default: () => null
6. 
   
   
   
   },
7. 
   
   
   
   id:{ //播放器的ID 唯一标识符 不传就是默认的 但是有多个的时候不一定是唯一的
8. 
   
   
   
   required: false,
9. 
   
   
   
   type: [String],
10. 
    
    
    
    default: `player-${Date.parse(new Date())}`
11. 
    
    
    
    }
12. 
    
    
    
    }

1. 
   // 暂停播放
2. 
   this.$refs.VueAliplayerV2.pause();

1. 
   
    <template>
2. 
   
   
   
   <vue-aliplayer-v2 @ready="handleReady" />
3. 
   
   
   
   </template>
4. 
   
   
   
   <script>
5. 
   
   
   
   export default {
6. 
   
   
   
   methods:{
7. 
   
   
   
   /**
8. 
   
   
   
    * 播放器事件回调
9. 
   
   
   
    */
10. 
    
    
    
    handleReady(e){
11. 
    
    
    
    console.log(`ready`,e);
12. 
    
    
    
    }
13. 
    
    
    
    }
14. 
    
    
    
    }
15. 
    
    
    
    </script>

1. 
   
   
   
   cd vue-aliplayer-v2
2. 
   
   
   
   
3. 
   
   
   
   npm install

您有功能建议,或者bug反馈请留言.

• vue-aliplayer 的作者,项目地址:
• https://github.com/slacrey/vue-aliplayer
  
• Alipayer 阿里云的开源播放器
• https://help.aliyun.com/document_detail/125572.html?spm=a2c4g.11186623.6.1085.36fc6fc57WKZ5P#h2-u64ADu653Eu5668u4E8Bu4EF63