fhefh2015
6/20/2018 - 6:06 AM

微信H5视频播放问题解决

微信H5视频播放问题解决

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <meta name="viewport" content="target-densitydpi=device-dpi,width=640,user-scalable=no"/>
    <style>
        html {
            -webkit-text-size-adjust: none;
            -webkit-user-select: none;
            -webkit-touch-callout: none;
            font-family: Helvetica;
        }

        html, body {
            position: relative;
            height: 100%;
        }

        body {
            font-family: Helvetica Neue, Helvetica, Arial, sans-serif;
            font-size: 14px;
            color: #000;
            margin: 0;
            padding: 0;
        }

        body, h1, h2, h3, h4, h5, h6, p, dl, dd, ul, ol, pre, form, input, textarea, th, td, select {
            margin: 0;
            padding: 0;
            font-weight: normal;
            text-indent: 0;
        }

        a, button, input, textarea, select {
            background: none;
            -webkit-tap-highlight-color: rgba(255, 0, 0, 0);
            outline: none;
            -webkit-appearance: none;
        }

        em {
            font-style: normal
        }

        li {
            list-style: none
        }

        a {
            text-decoration: none;
        }

        img {
            border: none;
            vertical-align: top;
        }

        table {
            border-collapse: collapse;
        }

        textarea {
            resize: none;
            overflow: auto;
        }

        .display_flex {
            display: -webkit-box; /* OLD - iOS 6-, Safari 3.1-6 */
            display: -moz-box; /* OLD - Firefox 19- (buggy but mostly works) */
            display: -ms-flexbox; /* TWEENER - IE 10 */
            display: -webkit-flex; /* NEW - Chrome */
            display: flex; /* NEW, Spec - Opera 12.1, Firefox 20+ */
        }

        .display_flex_1 {
            -moz-box-flex: 1; /*Firefox*/
            -webkit-box-flex: 1; /*Safari,Opera,Chrome*/
            -webkit-flex: 1;
            flex: 1;
        }

        .hide {
            display: none;
        }

        .container-video{
            position:absolute;
            top:0;
            left:0;
            right:0;
            bottom:0;
            z-index:2;
            display:none;
            overflow:hidden;
            text-align:center;
        }
        .container-video.active{
            display:block;
        }
        .container-video video{

            height:100%;
            width:100%;
            margin-left:auto;
            margin-right:auto;
        }


        .button {
            position: fixed;
            width: 100px;
            height: 50px;
            background: #266FE5;
            left: 50%;
            margin-left: -50px;
            bottom: 20px;
            z-index: 100;
        }
    </style>
    <script src="http://mat1.gtimg.com/hb/chenz/cj0808/js/jquery.min.js"></script>
</head>
<body>
<div class="button"></div>
<div class="container-video">
    <video id="video" src="http://qiniu-xpc3.xpccdn.com/5b1f8a486fc00.mp4" preload="auto" webkit-playsinline="true"
           playsinline="true" x-webkit-airplay="allow" x5-video-player-type="h5" x5-video-player-fullscreen="true"
           x5-video-orientation="portrait" style="object-fit: fill;"></video>
</div>
<script>
    var video = document.getElementById('video');

    $(".button").on('click', function () {
        $('.container-video').addClass('active');
        $('video')[0].play();
    });

    //侦听视频结束要做的事儿
    $('video').on('ended', function () {
        $('.container-video').removeClass('active');
        //todo here
    });
</script>
</body>
</html>