加載新的視頻SRC

我裝我的網頁上的HTML5視頻，看起來像這樣：加載新的視頻SRC

「

<div class="row"> 

     <video controls class="vid-center" poster="<?php echo get_template_directory_uri(); ?>/img/video-bg.png" id="video-id"> 
     <div class="video-overlay">logo and play bitton here logo and play bitton here </div> 
     <source src="http://www.sample-videos.com/video/mp4/720/big_buck_bunny_720p_1mb.mp4" type="video/mp4"> 
     <source src="movie.ogg" type="video/ogg"> 
     Your browser does not support the video tag. </video> 
    </div> 
    <div class="video-cont"></div> 
    </section> 
    <div class="row"> 

     <div class="large-3 small-4 columns"> 
      <img src="<?php echo get_template_directory_uri(); ?>/img/thumb-vid1.png" alt=""/> 
      <h4>Video name 1</h4> 
      <p>Lorum ipsum neg reyo sum tomenyen</p> 
     </div> 

     <div class="large-3 small-4 columns"> 
      <img src="<?php echo get_template_directory_uri(); ?>/img/thumb-vid2.png" alt=""/> 
      <h4>Video name 1</h4> 
      <p>Lorum ipsum neg reyo sum tomenyen</p> 
     </div> 

     <div class="large-3 small-4 columns"> 

      <img src="<?php echo get_template_directory_uri(); ?>/img/thumb-vid3.png" alt=""/> 
      <h4>Video name 1</h4> 
      <p>Lorum ipsum neg reyo sum tomenyen</p> 
     </div> 
     <div class="large-3 hide-for-small-only columns"> 

      <img src="<?php echo get_template_directory_uri(); ?>/img/thumb-vid4.png" alt=""/> 
      <h4>Video name 1</h4> 
      <p>Lorum ipsum neg reyo sum tomenyen</p> 
     </div> 
     </div>

」

我想創建一個基本畫廊，所以當用戶選擇/點擊/按下其中一個縮略圖時，它會將一個新視頻加載到視頻播放器中，即根據點擊哪個img/div更改視頻源。如果點擊縮略圖，則將字符串src加載到播放器並自動播放。

這是可能在JavaScript中做的改變當前的視頻src？

任何幫助將不勝感激。

來源

2016-04-26 ste

的可能的複製[我可以使用JavaScript來動態改變視頻的來源？]（http://stackoverflow.com/questions/3732562/can-i-use-javascript-to-dynamically-改變視頻源） –

這個演示是雙重的：

上半部分有四個div的，這在加載時會動態有一個視頻每個。
下半部分有一個視頻和一個播放列表。視頻元素將播放播放列表中點擊的內容。

他們有什麼共同點是他們共享相同的視頻和圖像文件。基本上，這個演示展示了在頁面上放置多個視頻的兩種方法。

頂部的例子開始爲4個正常的div。
- loadPlayers()在頁面加載時被調用。它將：
  - 將4個div收集到NodeList中。
  - 將NodeList轉換爲數組。
  - Array.prototype.map.call()也會打電話給一個匿名函數，將收集各的div id的和他們傳遞到下一個功能...
- struct(ID)負責建設的視頻元素。
  - 現在將loadPlayers()中的ID處理爲字符串，該字符串將爲每個視頻定義src的值。
  - 視頻和源元件通過setAttribute()
  - 最後，到它的對應分度appendChild()每個視頻中加入createElement()
  - 的屬性被添加製成。
底部示例動態創建從由開發者提供一個字符串數組的播放列表（這可以被修改，以便用戶可以與創建播放列表交互。）
- generateList(arr, str)需要一個字符串數組，並添加播放列表項目到的元素。第一個參數arr是一個數組，每個字符串表示視頻/圖像（無擴展名）的文件名。第二個參數是一個必須在語法上類似於選擇器的字符串。例如：
  
  <div id="vid3"></div> = "#vid3" <nav></nav> = "nav" <main class="box"></main> = ".box" <input type="number"/> = "input[type='number']"
- 雖然這個參數可以是任何元素，它的建議，UL，OL，DL或導航更適合舉辦播放清單項目。
- 使用array.map()將函數eachItem()應用於每個數組元素，然後將其作爲完整的播放列表返回;每個項目都是帶有剪輯背景圖像的錨點。
- 當點擊各項目時，事件監聽將觸發功能playSelect()

PLUNKER

README.md

片段

<!doctype html> 
 
<html> 
 

 
<head> 
 
    <meta charset="utf-8"> 
 
    <title>Video Gallery</title> 
 
    <style> 
 
    html, 
 
    body { 
 
     width: 100%; 
 
     height: 100%; 
 
     font: 400 16px/1.45 'Verdana'; 
 
    } 
 
    
 
    body { 
 
     position: relative; 
 
     background: #111; 
 
     color: #EEE; 
 
    } 
 
    
 
    .gallery { 
 
     display: flex; 
 
     flex-flow: row wrap; 
 
     justify-content: space-between; 
 
     width: 100vw; 
 
     height: 50vh; 
 
    } 
 
    
 
    #sec2 { 
 
     justify-content: center; 
 
    } 
 
    
 
    .vid { 
 
     width: 240px; 
 
     flex 0 2 auto; 
 
    } 
 
    
 
    .solo { 
 
     width: 480px; 
 
     flex: 0 2 auto; 
 
    } 
 
    
 
    video { 
 
     width: 100%; 
 
     height: auto; 
 
    } 
 
    
 
    .list { 
 
     border: 3px inset #fc3; 
 
     margin: 0 10px; 
 
    } 
 
    
 
    .list a { 
 
     text-decoration: none; 
 
     cursor: pointer; 
 
     display: block; 
 
     width: 75px; 
 
     height: 75px; 
 
     background-repeat: no-repeat; 
 
     background-size: cover; 
 
     color: #00f; 
 
     font-size: 1rem; 
 
     border-bottom: 1px solid #fc0; 
 
    } 
 
    
 
    .list a:hover { 
 
     color: #0ff; 
 
    } 
 
    
 
    @media screen and (max-width: 768px) { 
 
     #sec1 { 
 
     justify-content: flex-start; 
 
     } 
 
     #sec2 { 
 
     justify-content: flex-end; 
 
     } 
 
     .vid { 
 
     flex: 0 2 auto; 
 
     width: 160px; 
 
     } 
 
     .solo { 
 
     flex: 0 2 auto; 
 
     width: 320px; 
 
     } 
 
    } 
 
    </style> 
 
</head> 
 

 
<body> 
 
    <section id="sec1" class="gallery"> 
 
    <div id="vid1" class="vid"></div> 
 
    <div id="vid2" class="vid"></div> 
 
    <div id="vid3" class="vid"></div> 
 
    <div id="vid4" class="vid"></div> 
 
    </section> 
 

 
    <section id="sec2" class="gallery"> 
 
    <div id="vid5" class="solo"> 
 
     <video id="vid5v" poster="https://glpjt.s3.amazonaws.com/so/av/vid5.png" controls=true> 
 
     <source src="https://glpjt.s3.amazonaws.com/so/av/vid5.mp4" type="video/mp4"> 
 
     </video> 
 
    </div> 
 
    <nav id="vNav5" class="list"></nav> 
 
    </section> 
 

 
    <script> 
 
    var vNav5 = document.getElementById('vNav5'); 
 
    var playlist = ['vid1', 'vid2', 'vid3', 'vid4']; 
 

 

 
    function loadPlayers() { 
 
     var divs = document.querySelectorAll('.vid'); 
 
     var ids = Array.prototype.map.call(divs, function(obj) { 
 
     var ID = obj.id; 
 
     return vStruct(ID); 
 
     }); 
 
    } 
 

 
    function vStruct(id) { 
 
     var vTag = document.createElement('video'); 
 
     var vSrc = document.createElement('source'); 
 

 
     var vDiv = document.getElementById(id); 
 
     var vIDv = id.toString(); 
 
     vTag.id = vIDv + 'v'; 
 
     var vUrl = 'https://glpjt.s3.amazonaws.com/so/av/'; 
 
     var vPng = vUrl + id + '.png'; 
 
     var vMp4 = vUrl + id + '.mp4'; 
 

 
     vTag.setAttribute('poster', vPng); 
 
     vTag.setAttribute('controls', true); 
 

 
     vSrc.setAttribute('src', vMp4); 
 
     vSrc.setAttribute('type', 'video/mp4'); 
 

 
     vDiv.appendChild(vTag); 
 
     vTag.appendChild(vSrc); 
 

 
    } 
 

 
    function generateList(vArr, vStr) { 
 
     var vTgt = document.querySelector(vStr); 
 
     var lArr = vArr.map(eachLink); 
 
     lArr.forEach(function(obj) { 
 
     vTgt.appendChild(obj); 
 
     }); 
 
    } 
 

 
    function eachLink(id) { 
 
     var ID = id.toString(); 
 
     var vUrl = 'https://glpjt.s3.amazonaws.com/so/av/'; 
 
     var vLink = document.createElement('a'); 
 
     vLink.setAttribute('href', vUrl + ID + '.mp4'); 
 
     vLink.textContent = ID; 
 
     vLink.style.backgroundImage = "url('" + vUrl + ID + ".png')"; 
 
     return vLink; 
 
    } 
 

 
    vNav5.addEventListener('click', playSelect, false); 
 

 
    function playSelect(e) { 
 
     e.preventDefault(); 
 

 
     if (e.currentTarget !== e.target) { 
 
     var choice = e.target.href; 
 
     var parent = e.target.parentElement; 
 
     var uncle = parent.previousElementSibling; 
 
     var vid = uncle.querySelector('video'); 
 
     if (vid.playing) { 
 
      vid.pause(); 
 
     } 
 
     vid.src = ""; 
 
     vid.src = choice; 
 
     vid.load(); 
 
     vid.play(); 
 
     e.stopPropagation(); 
 
     } 
 
    } 
 

 
    loadPlayers(); 
 

 
    generateList(playlist, '#vNav5'); 
 
    </script> 
 
</body> 
 

 
</html>

來源

2016-04-26 10:40:00 zer00ne

這幾乎完全完美！非常感謝你！我將如何編輯JavaScript以將錨標籤封裝在另一個div中而不破壞它？ – ste

修改'genList（）'函數，如下所示： 'function generateList（vArr，vStr）{var_TT = document.querySelector（vStr）; var lArr = vArr.map（eachLink）; lArr.forEach（函數（OBJ）{VAR VDIV =使用document.createElement（ 'DIV'）; vTgt.appendChild（VDIV）; vDiv.appendChild（OBJ）; }）;' – zer00ne

如果我的回答幫你，請點擊這篇文章的綠色複選標記，如果我幫了你很多，然後upvote我呢;-) – zer00ne

加載新的視頻SRC

回答

相關問題