uniapp自定义组件的使用--记录

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

components：

  videoComp：

　　VideoPlaySelf.vue

VideoPlaySelf.vue 内容

<template>
    <video class="video" id="myVideo"
        :loop="false" direction="0" :src="videoUrl" @click="$emit('hideElement')" autoplay :controls="false"
        @loadedmetadata="$emit('loadedmetadataStart',$event)" @timeupdate="$emit('videoTimeUpdate',$event)"
        @ended="$emit('palyNextVideo',sectionId)" :show-center-play-btn="false" :show-play-btn="false"
        :show-fullscreen-btn="false" :enable-progress-gesture="false">
    </video>
</template>

<script lang="ts">
    import { defineComponent } from 'vue'
    import nav from '@/utils/nav'
    
    export default defineComponent({
        name: 'VideoPlaySelf',
        props: ["videoUrl",'sectionId'],
        data() {
            
        },
        methods: {
            getVideoContext() {
                return nav.uniSelf.createVideoContext('myVideo', this);
            },
            videoPlay() {
                nav.uniSelf.createVideoContext('myVideo', this).play();
            },
            videoPause() {
                nav.uniSelf.createVideoContext('myVideo', this).pause();
            },
            videoSeek(second: number) {
                nav.uniSelf.createVideoContext('myVideo', this).seek(second);
            }
        }
        
    })
</script>

<style lang="scss">
    .video {
        position: absolute;
        width: 100vw;
        height: 100vh;
    }
</style>

 

在对应的vue页面引入：

<template>
<view>
...
　　<VideoPlaySelf 
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"> 　</VideoPlaySelf>
...

</view>

</template>

<script lang="ts">
import VideoPlaySelf from '@/components/videoComp/VideoPlaySelf.vue';

export default defineComponent({
　　components: {
　　　　VideoPlaySelf 
　　}
　　...
</script>