在AJAX頁面加載後播放HTML5視頻

當通過AJAX請求到達頁面時，我正在努力獲得HTML5視頻播放。在AJAX頁面加載後播放HTML5視頻

如果刷新頁面或直接在頁面上，它可以正常工作。但是，通過AJAX導航到頁面時，它無法播放。

的代碼是：

<video id="video" autoplay="autoplay" loop="loop" muted="muted" poster="http://localhost/wp-content/themes/studioindigo/videos/contactbackground.jpg"> 
        <source src="http://localhost/wp-content/themes/studioindigo/videos/contactbackground.mp4" type="video/mp4"> 
        <source src="http://localhost/wp-content/themes/studioindigo/videos/contactbackground.webmhd.webm" type="video/webm"> 
        <img src="http://localhost/wp-content/themes/studioindigo/videos/contactbackground.jpg" alt="your browser does not support html5 video"> 
       </video>

我已經試過射擊AJAX頁面加載成功下面的代碼：

video = document.getElementById('video'); 
    video.load(); 

    video.addEventListener('loadeddata', function() { 
     video.play(); 
    }, false);

而且也乾脆：

video = document.getElementById('video'); 
video.play();

我也有嘗試使用video.js等插件，但無濟於事。

我不禁想起我錯過了一件非常簡單的事情。當然，如果視頻在頁面上並且有自動播放設置，那麼無論您是通過AJAX還是直接到達頁面，它都應該播放？

頁面的AJAX請求只會更新#main元素（視頻在裏面）和history.pushState - 可能與它有什麼關係？這似乎不太可能...

來源

2014-03-04 Paul Thomas

您的視頻標籤沒有ID，你有奇怪的''; '>在你的標記 – Musa

請看我自己的解決方案，以防萬一你有同樣的問題。 –

對於有同樣問題的人來說，我發現在ajax調用視頻後，屬性'paused：true'甚至認爲自動播放已經設置，我在'loadeddata'上調用video.play（）。

解決方案是在檢測到暫停時觸發video.play（）。我還發現，它在視頻上沒有「自動播放」屬性並且在多次初始化後變得更加平滑。

DOM：

<video id="video" loop muted> 
    <source src="video.mp4" type="video/mp4"> 
    <source src="video.webm" type="video/webm"> 
</video>

JS：

video = jQuery('#video').get()[0]; 

video.addEventListener('loadeddata', function() { 
    video.play(); 
}); 

video.addEventListener('pause', function() { 
    video.play(); 
});

而且，對於任何人想知道爲什麼我會想這個能力，它是一個視頻播放網頁上的背景，因此沒有必要供用戶播放/暫停。

來源

2014-03-06 15:07:07

我認爲你的用戶不是一個好主意，你會聽'pause'事件並用'play'來覆蓋它......用戶停止視頻的唯一方法就是離開你的網站。 –

您的視頻標籤沒有ID。如果你有兩個<video>標籤？你想：

<video id="blah"...

然後：

video = document.getElementById('blah');

來源

2014-03-04 18:23:32 waterlovinguy

對不起，這是舊版本。它在測試時確實有ID。我已經更新了上面的代碼。 –

潛在它是一個語法錯誤，因爲你似乎有一些PHP泄漏到在'; ?>形式的HTML，在結束poster和src屬性。

來源

2014-03-05 09:33:14 Houdmont

對不起...那又是我的壞話。我從PHP文件中複製它。我現在更新了DOM中輸出的代碼。我相當有信心所有的標記都是正確的，因爲它在頁面加載時播放。只要不是通過AJAX導航到它。 –

你可以在你的ajax調用之前調用video.play（）。像 HTML

<video id="video">...</video> 
 
<a href="javascript:play()"></a>

function play() { 
 

 
$("#video")[0].play(); // call play here !!! 
 

 
$.ajax(
 
"your url", 
 
{your data}, 
 
function() { 
 
$("#video")[0].play(); // usually we call play() here, but it will be pause beccause it can not be play if not in click or touch event sync 
 
.... 
 
} 
 
); 
 
}

來源

2017-06-14 10:03:17 Jian

在AJAX頁面加載後播放HTML5視頻

回答

相關問題