单击更改某些视频源答案

【问题标题】：Change certain video source on click单击更改某些视频源
【发布时间】：2014-11-06 12:15:26
【问题描述】：

我想知道如何在我的视频标签中仅将以下两个来源之一更改为 webm，另一个更改为 .mp4：

HTML：

    <video controls="controls" preload="auto" id="video" onclick="this.play();">
        <source src="fragmenten/real_schade.mp4" type="video/mp4"> </source>
        <source src="fragmenten/real_schade.webm" type="video/webm"> </source>
            Your browser doesn't support the video element.

    </video>

JQuery:

var bvideo = document.getElementById('background');

$("#car").on('click', function(){
    bvideo.pause();
    showPlaceHolder();
    showVID();
    $("#video").attr("src","fragmenten/real_schade2.mp4");
    $('#video').attr("autoplay", "autoplay");
});

这只是将一个源直接插入到标签中，我怎样才能将我用视频标签提供的两个源更改为 .mp4 和 .webm 而不是将两个源都更改为一个源/将视频 src 插入标签

【问题讨论】：

标签： javascript jquery html video

【解决方案1】：

如果您想在不更改文件扩展名的情况下动态替换所有来源，您可以这样做：

$(document).ready(function () {
    changeVideoTo("fragmenten/real_schade2");
});

function changeVideoTo(name) {
    $("#video source").each(function () {
        var oldSource = $(this).attr("src");
        var fileExtension = oldSource.split(".")[1]
        $(this).attr("src", name + "." + fileExtension);
    });
}

小提琴： http://jsfiddle.net/beznbxqc/2/

【讨论】：

实际上，它只能在一定程度上起作用.. 它替换了我的
您必须在最后的视频元素上调用.load()。不过，我没有示例视频可以向您展示...
见stackoverflow.com/questions/18703519/…
谢谢您，您的努力，问题已解决

【解决方案2】：

$("#video source:nth-of-type(1)").attr('src', videoFile);
$("#video video")[0].load()

试试这个：

【讨论】：

您应该为此答案添加解释。事实上，它出现在“低质量帖子队列”中并且很可能被删除。
@v.k.先生，您知道为什么一个视频在更换了该视频的来源后仍然播放旧视频吗？

【解决方案3】：

尝试使用此代码更改第一个来源：

$("#video source:first-of-type").attr("src","first/source.mp4");

这改变了第二个来源：

$("#video source:last-of-type").attr("src","first/source.webm");

我希望它有效：D

【讨论】：