uniapp引入微信小程序自定义视频组件--记录

官方文档：https://zh.uniapp.dcloud.io/tutorial/miniprogram-subject.html

在 pages.json同级目录下创建目录和文件：

wxcomponents：

my-video-play：

　　index.js

　　index.json

　　index.wxml

　　index.wxss

pages.json 全局引入：

index.js:

Component({

    properties: {

        videoUrl: String,

        sectionId: String

    },

    methods: {

        clickFun(event) {

            this.triggerEvent('hideElement');

        },

        loadedmetadataFun(event) {

            this.triggerEvent('loadedmetadataStart', event.detail.duration);

        },

        timeupdateFun(event) {

            this.triggerEvent('videoTimeUpdate', event.detail);

        },

        endFun() {

            this.triggerEvent('palyNextVideo', this.sectionId);

        },

        getVideoContext() {

            return wx.createVideoContext("myVideo", this);

        },

        videoPlay() {

            wx.createVideoContext("myVideo", this).play();

        },

        videoPause() {

            wx.createVideoContext("myVideo", this).pause();

        },

        videoSeek(second) {

            wx.createVideoContext("myVideo", this).seek(second);

        }

    }

})

index.wxml:

<video style="position: absolute; width: 100vw; height: 100vh;" id="myVideo"

    direction="0"

    src="{{videoUrl}}"

    autoplay

    controls="{{false}}"

    show-center-play-btn="{{false}}"

    show-play-btn="{{false}}"

    show-fullscreen-btn="{{false}}"

    enable-progress-gesture="{{false}}"

    bindloadedmetadata="loadedmetadataFun"

    bindtimeupdate="timeupdateFun"

    bindended="endFun"

    bindtap="clickFun"

>

</video>

index.json:

{

  "component": true

}

index.wxss: 空文件

然后在uniapp vue文件中引入该组件：

<template>
<view>
...
<my-video-play style="position: absolute; width: 100vw; height: 100vh;" v-if="current === index && (item.videoUrl !== '')" ref='videoPlaySelf'

                            :videoUrl="item.videoUrl" :sectionId="item.sectionId"

                            @hideElement="hideElement" @loadedmetadataStart="loadedmetadataStart"

                            @videoTimeUpdate="videoTimeUpdate" @palyNextVideo="palyNextVideo">

 </my-video-play>
...

</view>

</template>
<script lang="ts">
...
</script>
<style lang="scss" scoped>
...

</style>

巴特西

uniapp引入微信小程序自定义视频组件--记录

最新文章

热门文章