uni app环境下解决video无法跟随div滚动条滚动的问题

uni app环境下vue文件中，video因为用的是原生组件，所以只能跟随页面的滚动条。

假如你写了一个带滚动条的div，里面写了一个video标签，那对不起，video不会跟着滚动。

废话不多说，解决代码如下：

video组件的代码如下，实现思路就是借助iframe，通信就采用手动去触发事件

<template>  
    <iframe @event1="event1" @event2="event2" :onload="onloadCode" src="about:blank" style="border:1px solid;height: 300px;width: 100%"></iframe>  
</template>  

<script>  
    export default {  
        data() {  
            return {  
                onloadCode: `  
                const url = 'https://vd3.bdstatic.com/mda-mja2qsy47mbyh1xc/sc/cae_h264_clips/1633918903861514556/mda-mja2qsy47mbyh1xc.mp4?auth_key=1634030413-0-0-7898726f7bd328302e2119fdf694fd5e&bcevod_channel=searchbox_feed&pd=1&pt=3&abtest='  
                this.contentWindow.document.body.innerHTML = '<video style="width: 100%;height: 100%" controls="controls" src="'+url+'"></video>';  
                const iframe = top.document.getElementsByTagName('iframe')[0]  
                var evObj = document.createEvent('MouseEvents');  
                evObj.initEvent( 'event1', true, false );  
                iframe.dispatchEvent(evObj)  
                `  
            }   
        },  
        onShow() {  

        },  

        methods: {  
            event1(a) {  
                console.log(a)  
            },  
            event2(a) {  
                console.log(a)  
            }  
        }  
    }  
</script>  

<style>  
</style>  

以下是调用video，解决div滚动时video不跟随的代码

<template>  
    <view class="content">  
        <view class="text-area">  
            <div class="pos">  
                <Video />  
                <div class="zw">占位专用占位专用占位专用占位专用占位专用占位专用占位专用占位专用占位专用</div>  
                <div class="zw">占位专用占位专用占位专用占位专用占位专用占位专用占位专用占位专用占位专用</div>  
            </div>  
            <div class="zw">占位专用占位专用占位专用占位专用占位专用占位专用占位专用占位专用占位专用</div>  
            <div class="zw">占位专用占位专用占位专用占位专用占位专用占位专用占位专用占位专用占位专用</div>  
        </view>  
    </view>  
</template>  

<script>  
    import Video from './video/index.vue'  
    export default {  
        components: {  
            Video  
        }  
    }  
</script>  

<style>  
    .pos {  
        position: fixed;  
        bottom: 0;  
        background: red;  
        left: 0;  
        right: 0;  
        height: 500px;  
        overflow: auto;  
    }  
    .zw {  
        word-break: break-all;  
        height: 800px;  
    }  
</style>

app运行效果图如下，可以看出video是可以跟随div滚动的