天天看點
傳回

使用vtwinfx插件時fcpx意外退出_uniapp愛玩小灰視訊播放器使用流程

原生插件通用使用流程：

  1. 購買插件，選擇該插件綁定的項目。
  2. 在HBuilderX裡找到項目，在manifest的app原生插件配置中勾選子產品，如需要填寫參數則參考插件作者的文檔添加。
  3. 根據插件作者的提供的文檔開發代碼，在代碼中引用插件，調用插件功能。
  4. 打包自定義基座，選擇插件，得到自定義基座，然後運作時選擇自定義基座，進行log輸出測試。
  5. 開發完畢後正式雲打包

付費原生插件目前不支援離線打包。Android 離線打包原生插件另見文檔 https://nativesupport.dcloud.net.cn/NativePlugin/offline_package/androidiOS 離線打包原生插件另見文檔 https://nativesupport.dcloud.net.cn/NativePlugin/offline_package/ios

注意事項：使用HBuilderX2.7.14以下版本，如果同一插件且同一appid下購買并綁定了多個包名，送出雲打包界面提示包名綁定不一緻時，需要在HBuilderX項目中manifest.json->“App原生插件配置”->”雲端插件“清單中删除該插件重新選擇

awxhVideo 簡介

uni-app 原生端（Android）愛玩小灰視訊播放器插件。支援調整顯示比例，滑動調節播放進度、聲音、亮度，輕按兩下播放、暫停，重力感應自動進入/退出全屏以及手動進入/退出全屏，倍速播放的視訊元件。

使用vtwinfx插件時fcpx意外退出_uniapp愛玩小灰視訊播放器使用流程
使用vtwinfx插件時fcpx意外退出_uniapp愛玩小灰視訊播放器使用流程
使用vtwinfx插件時fcpx意外退出_uniapp愛玩小灰視訊播放器使用流程
使用vtwinfx插件時fcpx意外退出_uniapp愛玩小灰視訊播放器使用流程

功能清單

  • [x] 調整顯示比例
  • [x] 滑動調節播放進度、聲音、亮度
  • [x] 輕按兩下播放、暫停
  • [x] 重力感應自動進入/退出全屏以及手動進入/退出全屏
  • [x] 倍速播放
  • [ ] 視訊截圖
  • [ ] 清單小窗全局懸浮播放
  • [ ] 連續播放一個清單的視訊
  • [ ] 廣告播放
  • [ ] 邊播邊緩存
  • [ ] 彈幕
  • [ ] 多路播放器同時播放
  • [ ] 沒有任何控制UI的純播放
  • [ ] Android 8.0畫中畫
  • [ ] 無縫銜接播放
  • [ ] 抖音，實作預加載

使用教程

|API|說明| |---|---|---| |start|開始播放| |pause|暫停播放| |resume|繼續播放| |replay|重新播放| |release|釋放播放器| |getinfo|擷取視訊資訊| |start|開始播放| |pause|暫停播放| |start|開始播放| |pause|暫停播放| |set|設定視訊參數| |startFullScreen|進入全屏| |stopFullScreen|退出全屏| |startTinyScreen|開啟小屏| |stopTinyScreen|退出小屏| |setRotation|畫面旋轉|

|事件稱名|說明|傳回參數| |---|---|---| |@onPlayerStateChanged|監聽播放器狀态改變觸發事件|e| |@onPlayStateChanged|監聽播放狀态改變觸發事件|e|

引用方式 

<awxh-video  :thumb="thumb" :isLive="false" :title="title" :src="url" ref="videoView1" class="yincang" @onPlayerStateChanged="onPlayerStateChanged" @onPlayStateChanged="onPlayStateChanged"></awxh-video>

參數

options {Object} 相關選項

|屬性|類型|預設值|必填|說明| |---|---|---|---|---| |thumb|string||否|視訊縮略圖| |title|string||否|視訊标題| |src|string||是|視訊播放位址| |isLive|boolean|false|否|是否直播|

API

start()
播放視訊

參數

  • 無

示例

this.$refs.videoView1.start();

pause()
暫停播放視訊

參數

  • 無

示例

this.$refs.videoView1.pause();

resume()
繼續播放視訊

參數

  • 無

示例

this.$refs.videoView1.resume();

replay()
重新播放視訊

參數

  • 無

示例

this.$refs.videoView1.replay();

release()
釋放播放器

參數

  • 無

示例

this.$refs.videoView1.release();

getinfo(options,callback)
擷取視訊播放資訊

參數

  • 空對象

回調方法

callback {function (result)}

沒有監聽

1.觸發回調方法傳回

result{Object}

格式 |屬性|類型|說明| |---|---|---| |Duration|string|擷取視訊總時長| |CurrentPosition|string|擷取目前播放的位置| |BufferedPercentage|string|擷取目前緩沖百分比| |CurrentPlayerState|string|擷取目前播放器的狀态| |CurrentPlayState|string|擷取目前的播放狀态| |TcpSpeed|string|擷取緩沖速度| |width|string|擷取視訊寬| |height|string|擷取視訊高|

示例

this.$refs.videoView1.getinfo({}, ret => {
                a.ret = ret;
                const msg = JSON.stringify(ret);
                uni.showModal({
                    title: '提示',
                    content: msg,
                    success: function(res) {
                        if (res.confirm) {
                            console.log('使用者點選确定');
                        } else if (res.cancel) {
                            console.log('使用者點選取消');
                        }
                    }
                });
            });

set()
設定視訊

參數

options {Object} 相關選項 |屬性|類型|預設值|必填|說明| |---|---|---|---|---| |value|string||是|設定辨別符|

value{string} 可選值

|值|說明| |---|---| |scale_default|預設大小| |scale_169|16:9| |scale_43|4:3| |scale_original|原始大小| |scale_match_parent|填充| |scale_center_crop|居中裁剪| |speed_0_5|0.5倍速| |speed_0_75|0.75倍速| |speed_1_0|1倍速| |speed_1_5|1.5倍速| |speed_2_0|2倍速| |mirror_rotate|鏡像旋轉| |btn_mute|靜音| |qx_mute|取消靜音|

示例

this.$refs.videoView1.set('scale_default');

startFullScreen()
進入全屏

參數 示例

this.$refs.videoView1.startFullScreen();

stopFullScreen()
退出全屏

參數

  • 無

示例

this.$refs.videoView1.stopFullScreen();

startTinyScreen()
開啟小屏

參數

  • 無

示例

this.$refs.videoView1.startTinyScreen();

stopTinyScreen()
退出小屏

參數

  • 無

示例

this.$refs.videoView1.stopTinyScreen();

setRotation()
畫面旋轉

參數

options {Object} 相關選項 |屬性|類型|預設值|必填|說明| |---|---|---|---|---| |rotation|string||是|旋轉角度|

示例

this.$refs.videoView1.setRotation({
                rotation: '90'
            });

監聽事件

|事件稱名|說明|傳回參數| |---|---|---| |onPlayerStateChanged|監聽播放器狀态改變觸發事件|e| |onPlayStateChanged|監聽播放狀态改變觸發事件|e|

onPlayerStateChanged示例

onPlayerStateChanged(e) {
            this.PlayerState = e.detail.playerState;
        },

onPlayStateChanged示例

onPlayStateChanged(e) {
            this.PlayState = e.detail.playState;
        },

playerState{int} 狀态值

|值|說明| |---|---| |10|普通播放器| |11|全屏播放器| |12|小屏播放器|

playState{int} 可選值

|值|說明| |---|---| |-1|播放錯誤| |0|空閑| |1|準備| |2|已準備| |3|播放| |4|暫停播放| |5|播放完畢| |6|緩沖| |7|已緩沖| |8|開始播放中止|

示例 

<template>
    <div>
        <awxhVideo
            :thumb="thumb"
            :isLive="false"
            :title="title"
            :src="url"
            ref="videoView1"
            class="yincang"
            @onPlayerStateChanged="onPlayerStateChanged"
            @onPlayStateChanged="onPlayStateChanged"
        ></awxhVideo>
        <view class="fanhan"><image src="../../static/arrow-left.png" style="width: 30px;height: 30px;"></image></view>

        <text>播放狀态：{{ PlayState }}</text>
        <text>播放器狀态：{{ PlayerState }}</text>

        <div class="demo">
            <button type="primary" @click="onClickPlay()">開始播放</button>
            <button type="primary" @click="pause()">暫停</button>
            <button type="primary" @click="resume()">繼續播放</button>
            <button type="primary" @click="replay()">重新播放</button>
            <button type="primary" @click="release()">釋放播放器</button>

            <button type="primary" @click="getinfo()">擷取視訊資訊</button>

            <button type="primary" @click="set('scale_default')">預設大小</button>
            <button type="primary" @click="set('scale_169')">16:9</button>
            <button type="primary" @click="set('scale_43')">4:3</button>
            <button type="primary" @click="set('scale_original')">原始大小</button>
            <button type="primary" @click="set('scale_match_parent')">填充</button>
            <button type="primary" @click="set('scale_center_crop')">居中裁剪</button>
            <button type="primary" @click="set('speed_0_5')">0.5倍速</button>
            <button type="primary" @click="set('speed_0_75')">0.75倍速</button>
            <button type="primary" @click="set('speed_1_0')">1倍速</button>
            <button type="primary" @click="set('speed_1_5')">1.5倍速</button>
            <button type="primary" @click="set('speed_2_0')">2倍速</button>
            <button type="primary" @click="set('mirror_rotate')">鏡像旋轉</button>
            <button type="primary" @click="set('btn_mute')">靜音</button>
            <button type="primary" @click="set('qx_mute')">取消靜音</button>

            <button type="primary" @click="startFullScreen()">進入全屏</button>
            <button type="primary" @click="stopFullScreen()">退出全屏</button>
            <button type="primary" @click="startTinyScreen()">開啟小屏</button>
            <button type="primary" @click="stopTinyScreen()">退出小屏</button>

            <button type="primary" @click="setRotation('90')">畫面旋轉90</button>
        </div>
    </div>
</template>

<script>
export default {
    data() {
        return {
            PlayerState: 10,
            PlayState: 10,

            title: 'Hello',

            url: 'http://1252463788.vod2.myqcloud.com/95576ef5vodtransgzp1252463788/e1ab85305285890781763144364/v.f10.mp4',
            thumb: 'http://vimg1.ws.126.net/image/snapshot/2017/11/Q/6/VD3B5JBQ6.jpg'
        };
    },
    onBackPress(o) {
        if (this.PlayerState !== 10) {
            this.$refs.videoView1.back();
            return true;
        }
    },

    methods: {
        onPlayerStateChanged(e) {
            this.PlayerState = e.detail.playerState;
        },
        onPlayStateChanged(e) {
            this.PlayState = e.detail.playState;
        },
        getinfo() {
            var a = this;
            this.$refs.videoView1.getinfo({}, ret => {
                a.ret = ret;
                const msg = JSON.stringify(ret);
                uni.showModal({
                    title: '提示',
                    content: msg,
                    success: function(res) {
                        if (res.confirm) {
                            console.log('使用者點選确定');
                        } else if (res.cancel) {
                            console.log('使用者點選取消');
                        }
                    }
                });
            });
        },
        onClickPlay() {
            var a = this;
            this.$refs.videoView1.start();
        },

        set(v) {
            this.$refs.videoView1.set({
                value: v
            });
        },
        setRotation(v) {
            this.$refs.videoView1.setRotation({
                rotation: v
            });
        },
        pause() {
            this.$refs.videoView1.pause();
        },
        release() {
            this.$refs.videoView1.release();
        },
        replay() {
            this.$refs.videoView1.replay();
        },
        startTinyScreen() {
            this.$refs.videoView1.startTinyScreen();
        },
        startFullScreen() {
            this.$refs.videoView1.startFullScreen();
        },
        stopFullScreen() {
            this.$refs.videoView1.stopFullScreen();
        },
        stopTinyScreen() {
            this.$refs.videoView1.stopTinyScreen();
        },
        resume() {
            this.$refs.videoView1.resume();
        }
    }
};
</script>

<style >
.fanhan {
    background-color: rgba(0, 0, 0, 0.3);
    width: 35px;
    height: 35px;
    border-radius: 25px;
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    top: -200px;
    left: 10px;
}
.yincang {
    height: 210px;
}
.demo {
    flex-wrap: wrap;
    flex-direction: row;
    justify-content: space-between;
}
.demo-view {
    width: 700rpx;
    flex: 1;
    margin: 10rpx;
}
</style>
使用vtwinfx插件時fcpx意外退出
上一篇: Foundations of 3D Computer Graphics_Chapter10_Projection10.3.2 Shifts
下一篇: LUT Gallery插件不能使用怎麼辦？