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

这是一个基于Alipayer 开发并封装于vue的播放器

由于项目需要接入rtmp协议的直播流,用于实时监控,看了网上的几个开源播放器,最后选择了阿里云的开源播放器,Alipayer,但是Alipayer是cdn加载的,且没得一个正式的vue版本,最后还是选择了自己手写吧.废话不多说,直接上代码,如下:

项目地址: https://github.com/langyuxiansheng/vue-aliplayer-v2

本项目在线演示

阿里云播放器在线演示

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

1.安装使用! 下载安装npm包

npm i vue-aliplayer-v2 --save
or
yarn add vue-aliplayer-v2 

//全局注册 main.js

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

2.组件中使用

组件模板使用,但需要注意的是,假如你的页面中有多个播放器,那么这个id需要唯一!!,ID必传,只有一个的时候,可以忽略,命名只能是有效字符开头. 下面的视频连接是无效的,需要自己去替换成有效的.

<template>
    <div id="app">
        <vue-aliplayer-v2 
            @ready="handleReady" 
            ref="VueAliplayerV2" 
            id="player-1194076936807171180" 
            :options="options" />
        <button @click="play()">播放</button>
        <button @click="pause()">暂停</button>
        <button @click="replay()">重播</button>
        <button @click="getCurrentTime()">播放时刻</button>
    </div>
</template>
<script>
export default {
    data(){
        return {
            options: {  //配置项  
                source:'rtmp://182.112.15.258:1688/hls/1194076936807171180'
            }
        }
    },
    methods:{
 
        /**
         * 在这里需要注意的是  this.$refs 可能会返回是数组,或者对象,这个在用的时候需要注意一下.且因为是异步渲染dom,所以最好是在 this.$nextTick(()=>{ //todo }); 里面调用     
         * 事件可以参考文档 https://help.aliyun.com/document_detail/125572.html?spm=a2c4g.11186623.6.1085.36fc6fc57WKZ5P#h2-u64ADu653Eu5668u4E8Bu4EF63
         */
        play(){
            this.$refs.VueAliplayerV2.play()
        },
 
        pause(){
            this.$refs.VueAliplayerV2.pause();
        },
 
        replay(){
            this.$refs.VueAliplayerV2.replay();
        },
 
        getCurrentTime(){
            this.$refs.VueAliplayerV2.getCurrentTime();
        },
        
        /**
         * 播放器事件回调 
         */
        handleReady(e){
            console.log(`ready`,e);
        }
    }
}
</script>
<style lang="less" scoped>
* {
    margin: 0;
    padding: 0;
}
.player-btns{
    width: 800px;
    margin: 0 auto;
    display: flex;
    justify-content: space-between;
    span {
        margin: 0 auto;
        display: inline-block;
        padding: 5px 10px;
        width: 150px;
        height: 40px;
        line-height: 40px;
        border: 1px solid #eee;
        background: #e1e1e1;
        border-radius: 10px;
        text-align: center;
        margin: 20px auto;
        cursor: pointer;
    }
}
</style>

3.功能与配置

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

3.1 配置项 options 属性

可以参考 属性和接口说明

3.2 播放器方法

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

可以参考 播放器接口方法

4.播放器事件

<template>
    <vue-aliplayer-v2  @ready="handleReady" />
</template>
<script>
export default {
    methods:{
        /**
         * 播放器事件回调 
         */
        handleReady(e){
            console.log(`ready`,e);
        }
    }
}
</script>

可以参考 播放器事件

---

5. 图片展示

6.二次开发 下载项目

git clone https://github.com/langyuxiansheng/vue-aliplayer-v2.git

Project setup

cd vue-aliplayer-v2
 
npm install

Compiles and hot-reloads for development

npm run dev

Compiles and minifies for production

npm run build

Lints and fixes files

npm run lint

7.缺陷 & 后期计划

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

8.感谢

---

• 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

Customize configuration

See Configuration Reference.

9.项目案例展示

9.1 web PC端互联网监管,视频监控直播流

9.2微信公众号 H5效果展示