vue-fllplayer-v2 v1.2.2

vue-alipayer-v2

感谢每一位开源的开发者. 这是一个基于Alipayer 开发并封装成vue组件的播放器.

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

本项目在线演示

阿里云播放器在线演示

假如此轮子对你有帮助,请顺手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);

局部注册 App.vue

import VueAliplayerV2 from 'vue-aliplayer-v2';
components:{ VueAliplayerV2: VueAliplayerV2.Player }

2.组件中使用

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

<template>
    <div id="app">
        <template v-if="show">
            <vue-aliplayer-v2 :source="source" ref="VueAliplayerV2" :options="options" />
        </template>
        <p class="remove-text" v-else>播放器已销毁!</p>
        <div class="player-btns">
            <span @click="play()">播放</span>
            <span @click="pause()">暂停</span>
            <span @click="replay()">重播</span>
            <span @click="getCurrentTime()">播放时刻</span>
            <span @click="show = !show">{{ show ? '销毁' : '重载' }}</span>
            <span @click="options.isLive = !options.isLive">{{ options.isLive ? '切换普通模式' : '切换直播模式' }}</span>
            <span @click="getStatus()">获取播放器状态</span>
        </div>
        <div class="source-box">
            <span class="source-label">选择播放源(支持动态切换):</span>
            <select v-model="source" name="source" id="source">
                <option value="//player.alicdn.com/video/aliyunmedia.mp4">播放源1</option>
                <option value="//yunqivedio.alicdn.com/user-upload/nXPDX8AASx.mp4">播放源2</option>
                <option value="//tbm-auth.alicdn.com/e7qHgLdugbzzKh2eW0J/kXTgBkjvNXcERYxh2PA@@hd_hq.mp4?auth_key=1584519814-0-0-fc98b2738f331ff015f7bf5c62394888">播放源3</option>
                <option value="//ivi.bupt.edu.cn/hls/cctv1.m3u8">直播播放源4</option>
            </select>
        </div>
        <div class="source-box">
            <span class="source-label">输入播放源(支持动态切换):</span>
            <input class="source-input" type="text" v-model="source">
        </div>
    </div>
</template>
<script>
// import VueAliplayerV2 from 'vue-aliplayer-v2';
export default {
    // components:{ VueAliplayerV2: VueAliplayerV2.Player },
    data(){
        return {
            options: {
                source:'//player.alicdn.com/video/aliyunmedia.mp4'
            },
            source: '//player.alicdn.com/video/aliyunmedia.mp4',
            show: true
        }
    },

    methods:{

        play(){
            this.$refs.VueAliplayerV2.play()
        },

        pause(){
            this.$refs.VueAliplayerV2.pause();
        },

        replay(){
            this.$refs.VueAliplayerV2.replay();
        },

        getCurrentTime(){
            this.$refs.VueAliplayerV2.getCurrentTime();
        }
    }
}
</script>
<style lang="less">
* {
    margin: 0;
    padding: 0;
}
.remove-text{
    text-align: center;
    padding: 20px;
    font-size: 24px;
}
.player-btns{
    width: 100%;
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    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: 5px;
        cursor: pointer;
    }
}
.source-box{
    padding: 5px 10px;
    margin-bottom: 20px;
    .source-label{
        margin-right: 20px;
        font-size: 16px;
        display: block;
    }
    #source{
        margin-top: 10px;
    }
    .source-input{
        margin-top: 10px;
        padding: 5px 10px;
        width: 80%;
        border: 1px solid #ccc;
    }
}
</style>

3.功能与配置

props:{
    options: {  //配置项 (options.source 不支持动态切换,需要动态切换请直接使用source)
        required: false,
        type: [Object],
        default: () => null
    },

    source: {  //播放源(此属性存在则优先于options.source) 支持动态切换,目前只支持同种格式（mp4/flv/m3u8）之间切换。暂不支持直播rtmp流切换。
        required: false,
        type: [Object],
        default: () => null
    },
    
    id:{  //播放器的ID 唯一标识符 不传就是默认的 但是有多个的时候不一定是唯一的
        required: false,
        type: [String],
        default: `player-${Date.parse(new Date())}`
    },

    cssLink:{   //css版本源
        required: false,
        type: [String],
        default: `https://g.alicdn.com/de/prismplayer/2.8.2/skins/default/aliplayer-min.css`
    },
    scriptSrc:{ //js版本源
        required: false,
        type: [String],
        default: `https://g.alicdn.com/de/prismplayer/2.8.2/aliplayer-min.js`
    }
}

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.缺陷 & 后期计划

2019年12月27日 更新优化局部引用方式

您有功能建议,或者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.

更新日志

v1.2.2 修复指定id情况下,播放器报错"没有为播放器指定容器",目前移除外部指定id的方式,所有的播放器id都由内部生成,不再由外部指定容器(外部指定的意义并不大),其它的说明:更新1.2.1后报错Uncaught TypeError: 没有为播放器指定容器,因为源码中变更了部分代码,以及最大限度的简化代码,组件内部的根容器就只有一个div容器,导致以前外部指定id的时候,容器id与外部的不一致,导致抛出异常了,现在已经紧急修复了,若在使用,请更新到v1.2.2的版本;如果使用了外部指定id的方式请移除外部的id.否则id会出现重复的情况., 感谢"liyoro"的反馈和建议.

v1.2.1 修复直播播放的情况下,播放器已经销毁,而后台还在继续下载资源造成卡顿的bug,修复多个播放器只渲染1个的bug, 感谢"Jonauil"和"guangming95"两位网友的反馈和建议.

v1.2.0 修复播放源(MP4/m3u8)之间切换无法正常播放的bug,增加options配置项动态响应功能,优化部分播放器的逻辑, 感谢"liyoro"网友的反馈和建议.

v1.1.9 修复播放源(修复prop:source类型验证报错), 感谢"hugo2017"和“nullF”网友的反馈.

v1.1.8 修复播放源(增加source属性类型错误),修复获取播放器状态 getStatus()方法报错, 感谢"kongjigu"网友的反馈.

v1.1.7 增加动态切换播放源(增加source属性)功能 感谢"wikimo"和"jieruian"两位网友的反馈建议.

v1.1.6 修复部分已知bug和优化局部的引用方式