Home  >  Q&A  >  body text

Html5-video ,播放视频有声音无画面(微信H5页面)

求有过类似开发经验的解惑。。。。
问题:在做一个H5视频连续播放页面,在自动播放下一个视频的时候,有时会只有声音无画面,有时又正常,想请问一下大神们是神马原因?如何解决?(针对iPhone就可)

测试环境:

微信端(iPhone4s,5s)-出现以上问题;

PC端(谷歌浏览器模拟移动设备)-未出现问题,所以麻烦回答问题的大神用微信真实环境测试看看,后面我会贴出我的代码。

代码:(以下代码有用到zepto.js)
html——

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
        <meta name="apple-mobile-web-app-capable" content="yes">
        <meta name="format-detection" content="telephone=no">
        <meta content="telephone=no" name="format-detection">
    <style>
        .pop{width: 100%; height: 200px; overflow: hidden; /*background-color: red;*/}
        video{display: block;}
        body{background-color: red;}
    </style>
</head>
<body>
    <p class="pop">1
        <video src="http://babylife.qiniudn.com/FtRVyPQHHocjVYjeJSrcwDkApTLQ" webkit-playsinline width="100"></video>
    </p>
    <p class="pop">2
        <video src="http://babylife.qiniudn.com/FtRVyPQHHocjVYjeJSrcwDkApTLQ" webkit-playsinline width="100"></video>
    </p>
    <p class="pop">3
        <video src="http://babylife.qiniudn.com/FtRVyPQHHocjVYjeJSrcwDkApTLQ" webkit-playsinline width="100"></video>
    </p>
    <p class="pop">4
        <video src="http://babylife.qiniudn.com/FtRVyPQHHocjVYjeJSrcwDkApTLQ" webkit-playsinline width="100"></video>
    </p>
    <button id="btn">dianji</button>

    <script type="text/javascript" src="zepto_m.js"></script>
    <script type="text/javascript" src="t1.js"></script>

</body>
</html>

js——


Zepto(function($){
    var e = 0;
    $('.pop').eq(e).show().siblings().hide();
    for (var i = 0; i < $('.pop').length; i++) {
        var m = $('video').get(i);
        m.play();
        m.pause();
    };
    var m1 = $('video').get(e);
    m1.play();
    m1.addEventListener('playing', function(){
        
        var nextV = setInterval(function(){
            if(e != 0){
                m.pause();
            }else{
                m1.pause();
            };
            
            
            if(e < $('.pop').length-1){
                e++;

                m = $('video').get(e);
                m.play();
                $('.pop').eq(e).show().siblings().hide();

                
                m.addEventListener('playing', function(){
                    console.log('aaaa'+e);
                });
            }else{
                clearInterval(nextV);
            };

            
        },6000);
    });


    
});
PHP中文网PHP中文网2716 days ago1016

reply all(6)I'll reply

  • 大家讲道理

    大家讲道理2017-04-17 13:37:14

    How did you solve this problem? I also encountered the same problem as you today

    reply
    0
  • 黄舟

    黄舟2017-04-17 13:37:14

    Visual inspection indicates that the WeChat X5 kernel is incompatible

    reply
    0
  • ringa_lee

    ringa_lee2017-04-17 13:37:14

    There seems to be a problem with this solution, which will cause the video to "pause and resume playback" every 6 seconds.

    In addition, if you need to carousel videos, you should only use one video tag and dynamically change the src of the video tag to implement the video switching function. If there are multiple video elements on the page at the same time without destroying them, it will be unfriendly in terms of performance.

    reply
    0
  • 阿神

    阿神2017-04-17 13:37:14

    HTML5 development video tag setting video auto-play (in Android) I also encountered this, how did you do it, please help me

    reply
    0
  • PHPz

    PHPz2017-04-17 13:37:14

    It should be a problem with the video frame rate. You can save a normal video online and right-click to view it. Adjust your attributes to be the same as theirs

    reply
    0
  • 巴扎黑

    巴扎黑2017-04-17 13:37:14

    I also had this problem. There is sound but no picture. You can see the picture on WeChat, but the window is small. If you change other videos, everything is normal. What is the reason?

    reply
    0
  • Cancelreply