Modify html with javascript

Modify html with javascript

本文关键字：javascript with html Modify      更新时间：2023-09-26

我正在为自己开发一个小扩展。目标很简单，你点击扩展，输入一个youtube链接，视频在扩展弹出窗口中播放。

这是我的HTML

<body>
    Youtube Link: <input type="text" id="link" name="firstname">
    <button type="button" id="do-link"> Go ! </button>
    <script src="popup.js"></script>
    <p id="write">Here your link</p>
    <iframe id="ytplayer" title="YouTube video player" class="youtube-player" type="text/html" 
    width="640" height="390" src="https://www.youtube.com/watch?v=DTqTs15Hc9w"
    frameborder="0" allowFullScreen></iframe>
</body>

还有我的JS：

var a;
function link() {
    a = document.getElementById('link').value;
    document.getElementById('ytplayer').src = a;
    console.log(a);
}
document.getElementById('do-link').onclick = link;

所以这基本上只是在控制台中打印我的文本框中的内容。它显示了一个KSI视频（或者如果你放了链接，你想要的任何视频。我想知道是否有一种简单的方法可以用用户在文本框中写的链接替换youtube链接？

您可以更改IFRAME的SRC，但您需要使用Youtube中的嵌入url，而不仅仅是Youtube页面的IFRAME，否则会出现跨域错误。

此外，从Youtube URL，您需要获得视频ID并在嵌入SRC 中使用它

编辑您的代码：

HTML

`Youtube Link: <input type="text" id="link" name="firstname">
<button type="button" id="do-link"> Go ! </button>
<script src="popup.js"></script>
<p id="write">Here your link</p>
<iframe id="iframe_id" width="640" height="390" src="//www.youtube.com/embed/u1vhQOOZUF4" frameborder="0" allowfullscreen></iframe>`

JS-

var a;
function link() {
    a = document.getElementById('link').value;
    var videoid = youtube_parser(a);
    var new_link = "https://www.youtube.com/embed/" + videoid;
    document.getElementById('write').innerHTML = new_link;
    document.getElementById('iframe_id').src = new_link;
    console.log(new_link);
}
document.getElementById('do-link').onclick = link;
function youtube_parser(url){
    var regExp = /^.*((youtu.be'/)|(v'/)|('/u'/'w'/)|(embed'/)|(watch'?))'??v?=?([^#'&'?]*).*/;
    var match = url.match(regExp);
    if (match&&match[7].length==11){
        return match[7];
    }else{
        alert("Url incorrecta");
    }
}

这是一个工作版本（fiddle）：http://jsfiddle.net/x7mxos14/

额外：使用Lasnv函数进行解析。

只需在单击函数中将iframe-src替换为a即可。

相关文章：