更新记录

1.0.0(2023-10-25) 下载此版本

更新记录

1.0.0(2023-10-24)

本次主要是上线 android版 vlc播放器;支持两种组件;

  1. 第一种是“无原生控件” ;控件可请大家参考其他插件的实现方式。
  2. 第二种是“有原生控件”;实现了基本的播放器功能控件,可根据条件提供源码进行定制。

平台兼容性

Android Android CPU类型 iOS
适用版本区间:5.0 - 12.0 armeabi-v7a:支持,arm64-v8a:支持,x86:支持 ×

原生插件通用使用流程:

  1. 购买插件,选择该插件绑定的项目。
  2. 在HBuilderX里找到项目,在manifest的app原生插件配置中勾选模块,如需要填写参数则参考插件作者的文档添加。
  3. 根据插件作者的提供的文档开发代码,在代码中引用插件,调用插件功能。
  4. 打包自定义基座,选择插件,得到自定义基座,然后运行时选择自定义基座,进行log输出测试。
  5. 开发完毕后正式云打包

付费原生插件目前不支持离线打包。
Android 离线打包原生插件另见文档 https://nativesupport.dcloud.net.cn/NativePlugin/offline_package/android
iOS 离线打包原生插件另见文档 https://nativesupport.dcloud.net.cn/NativePlugin/offline_package/ios

注意事项:使用HBuilderX2.7.14以下版本,如果同一插件且同一appid下购买并绑定了多个包名,提交云打包界面提示包名绑定不一致时,需要在HBuilderX项目中manifest.json->“App原生插件配置”->”云端插件“列表中删除该插件重新选择


更新记录

1.0.0(2023-10-04)

本次主要是上线 android版 vlc播放器;支持两种组件;

  1. 第一种是“无原生控件” ;控件可请大家参考其他插件的实现方式。
  2. 第二种是“有原生控件”;实现了基本的播放器功能控件,可根据条件提供源码进行定制。

概述

vlc超级播放器,支持几乎所有视频和音频格式解码

Plays all formats MPEG-1/2, DivX® (1/2/3/4/5/6), MPEG-4 ASP, XviD, 3ivX D4, H.261, H.265, H.263 / H.263i, H.264 / MPEG-4 AVC, Cinepak, Theora, Dirac / VC-2, MJPEG (A/B), WMV 1/2, WMV 3 / WMV-9 / VC-1, Sorenson 1/3, DV, On2 VP3/VP5/VP6, Indeo Video v3 (IV32), Real Video (1/2/3/4). MPEG Layer 1/2, MP3 - MPEG Layer 3, AAC - MPEG-4 part3, Vorbis, AC3 - A/52, E-AC-3, MLP / TrueHD>3, DTS, WMA 1/2, WMA 3, FLAC, ALAC, Speex, Musepack / MPC, ATRAC 3, Wavpack, Mod, TrueAudio, APE, Real Audio, Alaw/µlaw, AMR (3GPP), MIDI, LPCM, ADPCM, QCELP, DV Audio, QDM2/QDMC, MACE. DVD, Text files (MicroDVD, SubRIP, SubViewer, SSA1-5, SAMI, VPlayer), Closed captions, Vobsub, Universal Subtitle Format (USF), SVCD / CVD, DVB, OGM, CMML, Kate. ID3 tags, APEv2, Vorbis comment.

有问题请联系 qq:2962631411 wx:xianmai-baobao

使用

<template>
    <div class="video-box" :style="videoBoxStyle">
        <text class="title" v-if="!isFull">vlc万能播放器</text>
        <div class="vlc-video-box">
            <text class="sub-title">无原生控件</text>
            <programbao-vlc-video-v1
                play="http://github.com/mediaelement/mediaelement-files/blob/master/big_buck_bunny.mp4?raw=true" 
                ref="vlc"
                :style="vlcVideoStyle"
                @onTimeChange="onTimeChange" 
                @onPositionChange="onPositionChange" 
                @onTotalTime="onTotalTime"
                @onPlayEnd="onPlayEnd" 
                @onPlayError="onPlayError" 
                @onOpening="onOpening"
            >
                <cover-view style="width: 100%;height: 100px;" class="video-view">
                    <text :style="{color:'#f40'}">标题</text>
                </cover-view>
            </programbao-vlc-video-v1>

            <text style="margin-top: 20px;" class="sub-title">有原生控件</text>
            <div
                style="width: 750rpx;height: 200px;">
                <programbao-vlc-video-v2
                    play="http://github.com/mediaelement/mediaelement-files/blob/master/big_buck_bunny.mp4?raw=true" 
                    ref="vlc-v2"
                    :style="vlcVideoStyle"
                    :title="title"
                    @onTimeChange="onTimeChange"
                    @onPositionChange="onPositionChange" 
                    @onTotalTime="onTotalTime"
                    @onPlayEnd="onPlayEnd" 
                    @onPlayError="onPlayError" 
                    @onOpening="onOpening">
                </programbao-vlc-video-v2>
            </div>
            <!-- 三方控件 -->
            <!-- <chunleiVideo 
                :setFullScreen="isFull" 
                @back="enterFullScreen"
                @tapFullScreen="enterFullScreen"
                :style="fullScreenStyle"></chunleiVideo> -->
        </div>

         <view class="btns">
            <button class="btn" @click="setRate(rate)" v-for="rate in rateArr" :key="rate">
                <text class="txt">速率 {{ rate }}</text>
            </button>
            <button class="btn primary" type="primary" @click="init"><text class="txt">初始化</text></button>
            <button class="btn primary" type="primary" @click="play"><text class="txt">播放</text></button>
            <button class="btn primary" type="primary" @click="pause"><text class="txt">暂停</text></button>
            <button class="btn primary" type="primary" @click="stop"><text class="txt">停止</text></button>
            <button class="btn primary" type="primary" @click="enterFullScreen"><text class="txt">全屏</text></button>
        </view>

    </div>
</template>

<script>
    // 导入三方控件
    // import chunleiVideo from '../../components/chunlei-video/chunlei-video.nvue'
    export default {  
        // components:{chunleiVideo},
        data() {  
            return {  
                msg: '',
                isFull: false,
                rateArr: ['0.25', '0.5', '1', '1.25', '1.5', '2'],

                initVideoViewStyle:  {
                    height: '200px'
                },
                fullScreenStyle: {
                    height: '200px'
                },
                vlcVideoStyle: {
                    height: '200px'
                },
                videoBoxStyle: {},
                title: "标题标题"
            }  
        },  
        onLoad() { 
        },  
        // 回退按钮监听 -- 判断退出全屏
        onBackPress(event) {
            if (event.from === 'navigateBack') {
                return false;
            }
            this.handleBackPressEvent();
            return true;
        },

        methods: {
            handleBackPressEvent() {
                let that = this
                if (that.$refs["vlc-v2"].handleIsExitFullScreenStatus) {
                    that.$refs["vlc-v2"].handleIsExitFullScreenStatus(function (isFull) {
                        if (!isFull) {
                            uni.navigateBack();
                        }
                    })
                } else {
                    uni.navigateBack();
                }
            },
            play() {
                this.$refs.vlc.toPlay()
            },
            pause() {
                this.$refs.vlc.pause()
            },
            stop() {
                this.$refs.vlc.stop()
            },
            enterFullScreen() {
                let that = this;
                if (!this.isFull) {
                    // plus.navigator.setFullscreen(true);
                    // plus.navigator.hideSystemNavigation();
                    // plus.screen.lockOrientation("landscape-primary");
                    setTimeout(() => {
                        let screenWidth = uni.getSystemInfoSync().screenWidth
                        let screenHeight = uni.getSystemInfoSync().screenHeight
                        // that.fullScreenStyle = {
                        //  'position': 'fixed',
                        //  'top': 0,
                        //  'left': 0,
                        //  'bottom': 0,
                        //  'right': 0,
                        //  'z-index': 100,
                        //  'width': screenWidth + 'px',
                        //  'height': screenHeight + 'px',
                        //  // 'background-color': '#f40'
                        // }
                        // that.isFull = !that.isFull;
                        // this.$refs.vlc.enterFullScreen({}, () => {
                        //  // subNVue.show('slide-in-top', 250)
                        // })
                    }, 200)
                    // this.$refs.vlc.requestFullScreen()
                    // this.$refs.vlc.changeToLandscape({}, function(res) {
                    //  that.fullScreenStyle = {
                    //      'position': 'fixed',
                    //      'top': 0,
                    //      'left': 0,
                    //      'bottom': 0,
                    //      'right': 0,
                    //      'z-index': 10,
                    //      'background-color': '#f40'
                    //  }
                    // });
                } else {
                    // plus.navigator.setFullscreen(false);
                    // plus.navigator.showSystemNavigation();
                    // plus.screen.lockOrientation("portrait-primary");
                    // setTimeout(() => {
                    //  let screenWidth = uni.getSystemInfoSync().screenWidth
                    //  // let screenHeight = uni.getSystemInfoSync().screenHeight
                    //  that.fullScreenStyle = {
                    //      ...that.initVideoViewStyle,
                    //      'width': screenWidth + 'px'
                    //  }
                    //  that.isFull = !that.isFull;
                    //  this.$refs.vlc.exitFullScreen({}, () => {
                    //      // subNVue.hide('slide-in-top', 250)
                    //  })
                    // }, 200)
                    // this.$refs.vlc.exitFullScreen()
                }
            },
            setRate(rate) {
                this.$refs.vlc.setRate({
                    "rate": rate //0.25 - 8.0
                })
            },
            onTimeChanged(res) {
                if (this.changing == false) {
                    console.log(res, 'resres')
                    this.current = res.detail.time;
                }

            },
            onTotalTime(res) {
                this.duration = res.detail.time;
            }
        }  
    }  
</script>
<style scoped>
    .video-view {
        position: absolute;
        top: 0;
        bottom: 0;
        left: 0;
        right: 0;
        z-index: 999;
    }
    .video-box {
        overflow: hidden;
    }
    .video-box .title {
        font-size: 20px;
        margin: 20px auto;
        font-weight: 700;
        text-align: center;
    }
    .video-box .sub-title {
        font-size: 16px;
        text-align: center;
    }
    .video-box .picture {
        flex-direction: row;
        /* flex-wrap: wrap; */

    }
    .video-box .picture .img {
        width: 200px;
        height: 200px;
    }
    .video-box .picture2 {
        justify-content: center;
        align-items: center;
    }
    .video-box .picture2 .img {
    }
    .video-box .btns {
        flex-direction: row;
        flex-wrap: wrap;
        justify-content: center;
        align-items: center;
    }
    .video-box .btns .btn {
        width: 100px;
        height: 40px;
        margin: 4px;
    }
    .video-box .btns .btn .txt {
        font-size: 30rpx;
    }
    .video-box .btns .btn.primary .txt {
        color: #fff;
    }
</style>

隐私、权限声明

1. 本插件需要申请的系统权限列表:

2. 本插件采集的数据、发送的服务器地址、以及数据用途说明:

3. 本插件是否包含广告,如包含需详细说明广告表达方式、展示频率:

许可协议

请参考开源项目地址的开源协议

使用中有什么不明白的地方,就向插件作者提问吧~ 我要提问