更改智能設備的html5視頻元素的HLS視頻源

Question

我正在嘗試使用javascript動態更改視頻源。 我有一個帶有<video>元素的網頁，該網頁將播放HLS流。 這可行，但是我無法從腳本動態更改視頻。

我真的很堅持。 我也許可以通過使用iframe解決此問題，但這會帶來其他問題。

有沒有人暗示如何在智能設備上使用視頻標簽來更改HLS-Stream，而不必關閉整個頁面並打開另一個頁面？

我知道移動智能設備只能播放一個視頻，但是，如果視頻源是HLS，則真的不可能動態更改視頻源嗎？

更新：遵循aldel的建議，我已將最小樣本更新為：

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">  
  <title>TestPage</title> 
  <script type="text/javascript">
  function changeVideoSrc(url)
  {
    var vid = document.getElementById("vid");
    vid.src = url;
    // Calling load() makes Safari request the segments, but still no video is being displayed:
    vid.load();
  }
  </script>
</head>
<body id="body">
<div id="mainDiv">
 <video id="vid" idth="260" height="208" controls src="http://10.42.120.25/hls/cam01.m3u8" type="application/x-mpegurl">No support for video</video>
</div>
<div>
 <input type="button" name="Cam01" value="Cam01" onclick="changeVideoSrc('http://10.42.120.25/hls/cam01.m3u8');">
 <input type="button" name="Cam02" value="Cam02" onclick="changeVideoSrc('http://10.42.120.25/hls/cam02.m3u8');">
</div>
</body>
</html>

不幸的是，此代碼仍無法在iPad上運行。 它可以在Android設備上正常運行，但不能在智能設備上運行。

我仍然只能在iPad上僅播放一個HLS源：如果我使用Safari到達iPad上的頁面，則可以單擊視頻控件的播放按鈕，然后視頻開始播放。 如果我再單擊“ Cam02”，則視頻將停止播放，但是無法播放新視頻：我從沒有在野生動物園的視頻控件上看到播放按鈕。 在服務器端，我可以看到Safari正在請求第二台攝像機的m3u8文件。 但從未要求過任何細分。

如果在更改src-Attribute之后調用load（）會變得更加有趣：我在服務器上看到將開始請求第二個攝像機的段。 僅視頻窗口保持黑屏-從未顯示過視頻。

這個load（）還有一個有趣的效果：如果我到達iPad上的頁面，並且沒有開始播放Cam01，而是單擊按鈕Cam02，切換到Cam02，然后調用Load I，就可以開始cam02的播放。

也非常有趣： 如果我不使用HLS源，而只是一個簡單的mp4 ，並且類型為'video / mp4'， 則一切正常 。 然后，我也可以在iPad上毫無問題地切換信號源。

還有其他提示嗎？ 很快我要說的是，蘋果公司只是無法為HLS提供適當的支持-盡管他們已經發明了它。 Chrome可以更好地處理它。 另請注意，iPad上的Chrome瀏覽器具有完全相同的問題。

Answer 1

您要更改視頻元素的src屬性，而不是其中的source元素，因此source元素仍具有其原始src屬性。 在這種情況下，我什至不確定瀏覽器是否有“正確的”操作，因此不同的瀏覽器執行不同的操作也就不足為奇了。

您應該在源元素而不是視頻元素上設置值。

否則不要首先使用source元素； 只需設置視頻標簽的src屬性即可。 我認為應該沒問題，因為無論如何一次您只有一個潛在的流URL（源標記用於當您對同一視頻內容使用不同的編碼，並且瀏覽器需要選擇它可以處理的一種）。 如果以這種方式進行，則更改src時也不需要調用.load（）。

（如果您確實保留了source元素，並更改了該元素的URL，我敢肯定您仍然需要在video元素而不是source元素上調用.load（）。）

Answer 2

您好，我用我的代碼嘗試過此問題，請幫助我解決我的問題，如何在點擊（m3u8播放列表）時更改hls視頻播放器上的src視頻

更改智能設備的html5視頻元素的HLS視頻源

問題描述

1 個解決方案

解決方案1
0 2015-02-07 22:15:05

解決方案2
0 2019-10-15 23:50:01

更改智能設備的html5視頻元素的HLS視頻源

問題描述

1 個解決方案

解決方案1 0 2015-02-07 22:15:05

解決方案2 0 2019-10-15 23:50:01

解決方案1
0 2015-02-07 22:15:05

解決方案2
0 2019-10-15 23:50:01