用链接替换嵌入式HTML5视频

时间:2015-04-02 14:11:38

标签: javascript html5

我正在尝试使用链接替换任何网页上的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

有人有任何建议吗?

1 个答案:

答案 0 :(得分:0)

&#39; src&#39;属性是在source元素上设置的,而不是在jsfiddle示例中的video元素。查看符合video或子source元素的edited jsfiddle

    //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);

        }
    }