啓用「apple-mobile-web-app-capable」模式時，視頻播放器的iOS 8問題

自從iOS 8發佈以來，我一直在努力解決我正在處理的網站上的問題。啓用「apple-mobile-web-app-capable」模式時，視頻播放器的iOS 8問題

我們製作了網站的平板電腦版本，爲了獲得更原生的應用外觀，我們啓用了Apple-Mobile-Web-app-capable模式。然後，我們要求我們的用戶在第一次加載網站時將網站添加到主屏幕。

當網站在iOS Safari瀏覽器中作爲普通網站加載時，這些視頻按照其應有的方式工作，但在iOS 8中，該視頻不支持網絡應用，當您從主屏幕。

我做了一個簡單的測試設置，它重現了這個問題。

<!DOCTYPE html> 
<html lang="en"> 
    <meta charset="utf-8"> 

    <title>iOS 8 apple mobile web app capable test</title> 
    <meta name="description" content="Test videoplayer in iOS 8 when adding shortcut to home screen"> 
    <meta name="author" content="TheSourceCodeAuthor"> 
    <head> 
     <meta name="apple-mobile-web-app-capable" content="yes" /> 
    </head> 
    <body> 
    <video width="320" height="240" controls> 
     <source src="sample.mp4"> 
     Your browser does not support the video tag. 
    </video> 
    </body> 
</html>

我已經測試過，如果它可能是一個跨領域的問題，因爲我們的視頻是從另一個域，那麼我們的主域名加載，但似乎沒有在這個問題上的任何影響，因爲我有如果我將視頻文件託管在同一個域中，也是同樣的問題。

我一直在搜索該問題的解決方案，但我一直無法找到任何解決方案。

這可能是Apple iOS 8中的一個錯誤，但是我還沒有發現蘋果關於此問題的任何官方消息。

請讓我知道，如果你已經能夠解決這個問題。

來源

2014-10-27 Gunnar

由於某些原因，iOS8的行爲與視頻不一樣。

我一直在試圖在iPad上沒有控件的全屏視頻iOS8，工作正常的iOS6和iOS7，但我發現唯一的確定的方法是播放，然後立即暫停視頻的視圖，然後使用事件監聽器確保視頻可以開始播放並開始播放。

就我而言，我使用了使用css translate的技術來隱藏視頻離開頁面以克服quicktime標誌錯誤。 .video-overlay是一個帶有播放時切換視頻的海報圖像的div。

（請原諒jQuery的Javascript的事件處理程序混合物和！）

var videoWrapper = $('#video-active'); 
var introVideo = $('video')[0]; 

$(document).ready(function(){ 
    introVideo.addEventListener('canplaythrough', function(){ 
     introVideo.play(); 
     videoWrapper.addClass('active'); 
     $('.video-overlay').hide(); 
     introVideo.removeEventListener('canplaythrough'); 
    }); 


    videoWrapper.on('timeupdate', function(event){ 
     onTrackedVideoFrame(this.currentTime); //this isn't relevant - was using timeline to trigger html text over the top of video at certain points in the timeline. 
    }); 

    $('.video-overlay').one('click', function(){ 
     introVideo.play(); 
     introVideo.pause(); //hack to force load by playing and then immediately pausing 

     videoWrapper.one('click', function(){ 
      introVideo.pause(); //pause video 
     }); 
    }); 
});

來源

2015-01-27 20:06:36 mikefosbrook

啓用「apple-mobile-web-app-capable」模式時，視頻播放器的iOS 8問題

回答

相關問題