video

已解决的问题：

1. video标签加controls 添加控制栏
2. 点击视频暂停
3. 监听视频播放事件
4. 视频全屏事件（兼容做的不是很完美，firefox不兼容，虽然写了但是失效）

<template>
    <div>
        视频:
        <!-- controls 添加控制栏 -->
        <video src="../static/happy.mp4" controls id="myVideo"></video>
        <br>
        <br>
        <br>
        <div @click="getPause">点击视频暂停</div>
    </div>
</template>
<script>
export default {
    data(){
        return{
        }
    },
    mounted(){
   
        // 默认暂停，点击播放是全屏播放
        let video = document.getElementById('myVideo')
        /* 监听视频播放 */
        video.addEventListener('play',function(){
            /* 兼容各种浏览器 */
            let de = document.documentElement
            if (de.requestFullscreen){
                video.requestFullscreen()
            } else if (de.mozRequestFullScreen){
                video.mozRequestFullScreen();
            } else if (de.webkitRequestFullScreen) {
                video.webkitRequestFullScreen();
            }
        })
    },
    methods:{
        getPause(){
            // 视频暂停事件
           document.getElementById('myVideo').pause() 
        }
    }
}
</script>
<style scoped>
video{
    width: 300px;
}

</style>