Uniapp love to play small gray video player usage process

Time:2021-4-7

General use process of native plug-ins:

  1. Purchase a plug-in and select the project that the plug-in is bound to.
  2. Find the project in hbuilderx, check the module in app native plug-in configuration of manifest, if you need to fill in parameters, please refer to the plug-in author’s document to add.
  3. Develop the code according to the documents provided by the plug-in author, reference the plug-in in the code and call the plug-in function.
  4. Package the custom pedestal, select the plug-in, get the custom pedestal, and then select the custom pedestal at runtime to test the log output.
  5. After the completion of the development, the cloud is formally packaged

Paid native plug-ins currently do not support offline packaging. Android offline packaging native plug-ins, see the document https://nativesupport.dcloud.net.cn/NativePlugin/offline_ Package / Android IOS offline packaging native plug-ins see the document https://nativesupport.dcloud.net.cn/NativePlugin/offline_ package/ios

Note: with versions below hbuilderx2.7.14, if multiple package names are purchased and bound under the same plug-in and the same appid, and the submission cloud packaging interface prompts that the package name binding is inconsistent, it needs to be in the hbuilderx project manifest.json ->”App native plug-in configuration” – > “cloud plug-in” list, delete the plug-in and reselect it


Introduction to awxhvideo

The native end of uni app (Android) likes to play the small gray video player plug-in. Support to adjust the display ratio, slide to adjust the playback progress, sound, brightness, double-click play, pause, gravity sensing automatically enter / exit the full screen, and manually enter / exit the full screen, double speed video components.



Function list

  • [x] Adjust the display scale
  • [x] Slide to adjust playback progress, sound and brightness
  • [x] Double click play, pause
  • [x] Automatic entry / exit of full screen and manual entry / exit of full screen by gravity sensor
  • [x] Double speed play
  • Video capture
  • Global suspension play in the small window of the list
  • [] play a list of videos in succession
  • Advertising
  • [] cache while playing
  • [] barrage
  • Multiple players play at the same time
  • [] no control UI for pure playback
  • ] Android 8.0 picture in picture
  • Seamless play
  • [tiktok, preloading

Using the tutorial

API explain
start Start playing
pause Pause play
resume Continue playing
replay Replay
release Release player
getinfo Get video information
start Start playing
pause Pause play
start Start playing
pause Pause play
set Setting video parameters
startFullScreen Enter full screen
stopFullScreen Exit full screen
startTinyScreen Open small screen
stopTinyScreen Exit small screen
setRotation Picture rotation
Event name explain Return parameters
@onPlayerStateChanged Monitor the trigger event of player state change e
@onPlayStateChanged Monitor the event triggered by playing state change e

Citation Method

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

parameter

options {Object}Related options

attribute type Default value Required explain
thumb string no Media Preview
title string no Video title
src string yes Video playback address
isLive boolean false no Live or not

API

start()

Play the video

parameter
  • nothing
Examples
this.$refs.videoView1.start();

pause()

Pause video

parameter
  • nothing
Examples
this.$refs.videoView1.pause();

resume()

Continue playing the video

parameter
  • nothing
Examples
this.$refs.videoView1.resume();

replay()

Replay video

parameter
  • nothing
Examples
this.$refs.videoView1.replay();

release()

Release player

parameter
  • nothing
Examples
this.$refs.videoView1.release();

getinfo(options,callback)

Get video playback information

parameter
  • Empty object
Callback method

callback {function (result)} 

No monitoring

1. Trigger callback method returnresult{Object}Format

attribute type explain
Duration string Total duration of video acquisition
CurrentPosition string Get the current playing position
BufferedPercentage string Gets the current buffer percentage
CurrentPlayerState string Gets the status of the current player
CurrentPlayState string Get the current playback status
TcpSpeed string Get buffer speed
width string Get video width
height string Get video high
Examples
this.$refs.videoView1.getinfo({}, ret => {
                a.ret = ret;
                const msg = JSON.stringify(ret);
                uni.showModal({
                    Title: 'prompt',
                    content: msg,
                    success: function(res) {
                        if (res.confirm) {
                            console.log ('user clicks OK ');
                        } else if (res.cancel) {
                            console.log ('user clicks Cancel ');
                        }
                    }
                });
            });

set()

Set up video

parameter

options {Object}Related options

attribute type Default value Required explain
value string yes Set identifier

value{string}Optional value

value explain
scale_default Default size
scale_169 16:9
scale_43 4:3
scale_original Original size
scale_match_parent fill
scale_center_crop Center cut
speed_0_5 0.5 times speed
speed_0_75 0.75 times speed
speed_1_0 Double speed
speed_1_5 1.5 times speed
speed_2_0 Double speed
mirror_rotate Mirror rotation
btn_mute Mute
qx_mute Unmute
Examples
this.$refs.videoView1.set('scale_default');

startFullScreen()

Enter full screen

parameter
Examples
this.$refs.videoView1.startFullScreen();

stopFullScreen()

Exit full screen

parameter
  • nothing
Examples
this.$refs.videoView1.stopFullScreen();

startTinyScreen()

Open small screen

parameter
  • nothing
Examples
this.$refs.videoView1.startTinyScreen();

stopTinyScreen()

Exit small screen

parameter
  • nothing
Examples
this.$refs.videoView1.stopTinyScreen();

setRotation()

Picture rotation

parameter

options {Object}Related options

attribute type Default value Required explain
rotation string yes Rotation angle
Examples
this.$refs.videoView1.setRotation({
                rotation: '90'
            });
Monitoring events
Event name explain Return parameters
onPlayerStateChanged Monitor the trigger event of player state change e
onPlayStateChanged Monitor the event triggered by playing state change e
Onplayerstatechanged example
onPlayerStateChanged(e) {
            this.PlayerState = e.detail.playerState;
        },
Onplaystatechanged example
onPlayStateChanged(e) {
            this.PlayState = e.detail.playState;
        },

playerState{int}State value

value explain
10 Ordinary player
11 Full screen player
12 Small screen player

playState{int}Optional value

value explain
-1 Play error
0 free
1 get ready
2 Ready
3 play
4 Pause play
5 It’s over
6 buffer
7 Buffered
8 Start play stop

Examples

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

        < text > playback state: {{playstate}} < / text >
        < text > player state: {{player state}} < / text >

        <div class="demo">
            < button type = "primary" @ Click = "onclickplay()" > start playing < / button >
            < button type = "primary" @ Click = "pause()" > pause < / button >
            < button type = "primary" @ Click = "resume()" > continue playing < / button >
            < button type = "primary" @ Click = "replay()" > replay
            < button type = "primary" @ Click = "release()" > release the player < / button >

            < button type = "primary" @ Click = "getinfo()" > get video information

            <button type="primary" @click="set('scale_ Default ') "> default size < / 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 ') "> original size < / button >
            <button type="primary" @click="set('scale_ match_ Parent ') "> fill < / button >
            <button type="primary" @click="set('scale_ center_ Crop ') "> center crop < / button >
            <button type="primary" @click="set('speed_ 0_ 5 ') "> 0.5 times speed < / button >
            <button type="primary" @click="set('speed_ 0_ 75 ') "> 0.75 times speed < / button >
            <button type="primary" @click="set('speed_ 1_ 0 ') "> 1 times speed < / button >
            <button type="primary" @click="set('speed_ 1_ 5 ') "> 1.5 times speed < / button >
            <button type="primary" @click="set('speed_ 2_ 0 ') "> 2 times speed < / button >
            <button type="primary" @click="set('mirror_ Rotate ') "> mirror rotation < / button >
            <button type="primary" @click="set('btn_ Mute ') "> mute < / button >
            <button type="primary" @click="set('qx_ Mute ') "> unmute < / button >

            < button type = "primary" @ Click = "startfullscreen()" > enter full screen < / button >
            < button type = "primary" @ Click = "stopfullscreen()" > Exit full screen
            < button type = "primary" @ Click = "starttinyscreen()" > open small screen < / button >
            < button type = "primary" @ Click = "stoptinyscreen()" > Exit small screen < / button >

            < button type = "primary" @ Click = "SetRotation ('90 ')" > screen rotation 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: 'https://imgs.developpaper.com/imgs/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: 'prompt',
                    content: msg,
                    success: function(res) {
                        if (res.confirm) {
                            console.log ('user clicks OK ');
                        } else if (res.cancel) {
                            console.log ('user clicks Cancel ');
                        }
                    }
                });
            });
        },
        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 lang="scss">
.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>