简体中文(ZH-CN) English(EN) 繁体中文(ZH-TW) 日本語(JA) 한국어(KO) Melayu(MS) Français(FR) Deutsch(DE)
Html5-video ，播放视频有声音无画面（微信H5页面）
PHP中文网
PHP中文网 2017-04-17 13:35:14
0
6
1049

求有过类似开发经验的解惑。。。。
问题：在做一个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中文网

认证高级PHP讲师

reply all(6)
大家讲道理
大家讲道理2017-04-17 13:37:14 6 floor

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

Like +0
Add Reply
黄舟
黄舟2017-04-17 13:37:14 5 floor

Visual inspection indicates that the WeChat X5 kernel is incompatible

Like +0
Add Reply
左手右手慢动作
左手右手慢动作2017-04-17 13:37:14 4 floor

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.

Like +0
Add Reply
阿神
阿神2017-04-17 13:37:14 3 floor

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

Like +0
Add Reply
PHPzhong
PHPzhong2017-04-17 13:37:14 2 floor

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

Like +0
Add Reply
巴扎黑
巴扎黑2017-04-17 13:37:14 1 floor

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?

Like +0
Add Reply
Popular Topics
More>
Popular Articles
Popular Tutorials
More>
Related Tutorials
Popular Recommendations
Latest courses
Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template
About us Disclaimer Sitemap
php.cn：Public welfare online PHP training，Help PHP learners grow quickly！