替換鏈接的嵌入式HTML5視頻

Question

我試圖用鏈接替換任何網頁上的WebM視頻。

所以，我寫了一個簡單的代碼，但它不起作用。我不知道爲什麼。

(function(){ 
var video = document.getElementsByTagName('video')[0]; 

for (var i = 0; i < video.length; i++) { 
    var vidUrl = video[i].src; 
    if (video[i].src.match(/\.webm$/i)) { 
     var a = document.createElement("a"); 
     a.appendChild(document.createTextNode(vidUrl)); 
     a.setAttribute("href", vidUrl); 
     video[i].parentNode.replaceChild(a, video[i]); 
    } 
} 
})(); 

JSFiddle Example

有沒有人有什麼建議嗎？

Answer 1

'src'屬性在元素上設置，而不是在jsfiddle示例中的video元素上設置。見我edited jsfiddle將匹配video或兒童source元素：

//var video = document.getElementsByTagName('video'); 
    var video = document.querySelectorAll('video[src], video source[src]'), 
     vidElement; 

    for (var i = 0; i < video.length; i++) { 
     vidElement = video[i]; 
     var vidUrl = vidElement.src; 
console.log(vidUrl);   
     if (vidElement.src.match(/\.webm$/i)) { 
      var a = document.createElement("a"); 
      a.appendChild(document.createTextNode(vidUrl)); 
      a.setAttribute("href", vidUrl); 
      // make sure we replace video element instead of source 
      if (/source/i.test(vidElement)) vidElement = vidElement.parentNode; 

      vidElement.parentNode.replaceChild(a, vidElement); 

     } 
    }