Safari瀏覽器跳轉到顯示HTML5自動播放視頻

我收到了包含最近帖子的Instagram內容。如果帖子是一個視頻，則會顯示如下：具有自動播放，循環和靜音屬性的HTML5視頻。Safari瀏覽器跳轉到顯示HTML5自動播放視頻

美學效果非常令人愉悅;然而在Safari中，當視頻完成加載時，瀏覽器會將網頁跳到視頻的位置。它不會在Chrome中執行此操作。

視頻不是主要內容，所以我不希望它向下跳頁。

問題

是否有自動播放的W3C標準？即在Safari或Chrome瀏覽器採取了默認的態度
什麼是解決這個問題的最好方法是什麼？在soultion

思考我可以關閉自動播放功能，而是用JS觸發的發揮。然而，這似乎有點不必要，並創建一個新的依賴。

來源

2016-12-22 slawrence10

W3C似乎並沒有說，如果自動播放影片應自動滾動專注，所以不要認爲是對的還是錯的。我的首選是剝離自動播放並讓用戶點擊以啓動任何視頻 - 意味着用戶總是從一開始就看到視頻，並控制帶寬使用 – Offbeatmammal

謝謝@Offbeatmammal我知道UX的含義。令人討厭的是，safari似乎強制這一點。 – slawrence10

我一直在遇到與正在處理的網站相同的問題。我嘗試刪除自動播放屬性，並在JS中超時後觸發視頻播放。但是，只要視頻被觸發播放，Safari就會像以前一樣跳回到視頻。 –

*更新：限制滾動長度1500臺，直到2秒視頻開始播放後...

<html> 
<head> 
    <script type="text/javascript"> 
    var scrollPosition = 0; 
    var videoLoaded = false; 
    function bodyOnScroll() { 
    // this 1500 value might need to be tweaked less or more depending 
    // on how far the scroll to your video is 
    if(Math.abs(document.body.scrollTop - scrollPosition) > 1500 && !videoLoaded) 
    { 
    // don't scroll 
    document.body.scrollTop=scrollPosition; 
    } 
    else 
    { 
    // reload the variable to match current position 
    scrollPosition=document.body.scrollTop; 
    } 
    } 
    function videoOnPlaying(){ 
    // wait 2 seconds and then disable the max scrollPosition 
    // might want to tweak this too depending 
    setTimeout(function() { 
     videoLoaded = true; 
    }, 2000); 
    } 
    </script>  
</head> 
<body onScroll="bodyOnScroll();"> 
<video autostart onPlay="videoOnPlaying();"></video>

來源

2017-01-02 19:08:23 pizzaslice

感謝您的貢獻。瞭解UX的含義。不幸的是，您的解決方案目前與我的問題做同樣的事情......它跳過用戶在視頻加載頁面的某處。 – slawrence10

Safari瀏覽器跳轉到顯示HTML5自動播放視頻

回答

相關問題