简体中文(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
1047

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

全部回覆(6)
大家讲道理
大家讲道理2017-04-17 13:37:14 6樓

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

點贊 +0
新增回覆
黄舟
黄舟2017-04-17 13:37:14 5樓

目測是微信X5內核不相容

點贊 +0
新增回覆
左手右手慢动作
左手右手慢动作2017-04-17 13:37:14 4樓

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

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

點贊 +0
新增回覆
阿神
阿神2017-04-17 13:37:14 3樓

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

點贊 +0
新增回覆
PHPzhong
PHPzhong2017-04-17 13:37:14 2樓

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

點贊 +0
新增回覆
巴扎黑
巴扎黑2017-04-17 13:37:14 1樓

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

點贊 +0
新增回覆
熱門專題
更多>
熱門文章
熱門教學
更多>
相關教學
熱門推薦
最新課程
最新下載
更多>
網站特效
網站源碼
網站素材
前端模板
關於我們 免責聲明 Sitemap
PHP中文網：公益線上PHP培訓，幫助PHP學習者快速成長！