首頁  >  問答  >  主體

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 天前1015

全部回覆(6)我來回復

  • 大家讲道理

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

    請問這個問題你怎麼解決的,今天我也遇到了跟您一樣的問題

    回覆
    0
  • 黄舟

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

    目測是微信X5內核不相容

    回覆
    0
  • ringa_lee

    ringa_lee2017-04-17 13:37:14

    這個方案似乎有問題,會造成每隔6秒影片「暫停-繼續播放」的操作。

    另外,如果需要輪播視頻,則應只使用一個video標籤,透過動態改變該video標籤的src來實現視頻切換功能。頁面上同時存在多個video元素而未加銷毀的話,性能上是不友善的。

    回覆
    0
  • 阿神

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

    HTML5開發 video標籤 設定影片自動播放(安卓中) 我也遇到了,你怎麼弄的,求教大神

    回覆
    0
  • PHPz

    PHPz2017-04-17 13:37:14

    應該是視頻幀率的問題,你可是保存一個網上的正常的視頻,右鍵看下他的。把自己屬性跟他們調成一樣的

    回覆
    0
  • 巴扎黑

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

    我也出現了這個原因,有聲音無畫面,在微信上是可以看到畫面的,就是窗口是小的,換了其他的視頻一切都是正常的,請問這是什麼原因?

    回覆
    0
  • 取消回覆