视频加载不上 报object20%module解决方法

今天在网页上加载视频一直加载不上 发现后台报 object20%module
后来发现是 引入的方式不对 出现问题的原因是由 commonJS 和 ES6引入方式冲突引起的
只需要换成ES6引入方式引入视频即可
直接看代码吧

HTML部分

  <div style="height: 240px;display: flex;justify-content:space-between;"
                 class="twoshipin">
                <video autoplay="autoplay" controls="controls" width="48%" height="100%" @click.prevent="play1">
                    <source :src="tv" type="video/mp4" ref='tv1'></source>
                </video>

                <video autoplay="autoplay" controls="controls" width="48%" height="100%" @click.prevent="play2">
                    <source :src="tv1" type="video/mp4" ref='tv2'></source>
                </video>
            </div>

JS部分

<script>
    import tv from '@/assets/zuo.mp4'
    import tv1 from '@/assets/you.mp4'
    export default {
        name: "Tvshow",
        data() {
            return {
                tv,
                tv1,
                nowDateTime: '',
                url: tv,
            }
        }
        }
        </script>

这样就可以完美解决 加载不上视频问题