<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>

<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>