<!doctype html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" /> <title>视频播放器</title> <style type="text/css"> * { margin: 0px; padding: 0px; } .app { width: 100%; height: 100%; position: absolute; top: 0px; right: 0px; bottom: 0px; left: 0px; overflow: hidden; } .video { width: 100%; height: 100%; } #my-video { object-fit: cover; object-position: center center; } </style> </head> <body> <div id="app" class="app"> <video preload='auto' id='my-video' ref="video" :src="videoUrl" @click="player" loop autoplay="autoplay" webkit-playsinline='true' playsinline='true' x-webkit-airplay='true' x5-video-player-type='h5' x5-video-player-fullscreen='true' x5-video-ignore-metadata='true' width='100%' height='100%'> <p> 不支持video</p> </video> </div> </body> <script type="text/javascript" src="./js/vue.js"></script> <script type="text/javascript"> // vue 解析 var Application = new Vue({ el: "#app", data: { videoUrl: '', video: null, }, mounted: function () { // this.videoUrl = "D:/视频剪辑/video2.mp4"; this.videoUrl = "http://vfx.mtime.cn/Video/2017/03/31/mp4/170331093811717750.mp4" this.video = this.$refs.video; }, methods: { player: function () { console.log(this.video.clientWidth); console.log(this.video.clientHeight); if (this.video.paused) { // 播放 this.video.play(); } else { // 暂停 this.video.pause() }; } } }); </script> </html>