H5全屏播放

<!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>
posted @ 2021-03-26 09:47 火星黑洞阅读(94) 评论(0) 收藏举报
刷新页面返回顶部