Question

我对javascript很陌生。我正在尝试创建一个页面，该页面在文本区域中获取youtube视频的网址，然后将其传递给视频播放器对象，然后播放视频。

这是我当前拥有的代码（文本区域，youtube视频播放器（iframe）和javascript）。

    <textarea id = "link" rows = "1" cols = "40" class = center>
        Insert link here
    </textarea>
    <input type="button" value="submit" onclick="getLink()">

    <div id="output">
        <iframe width="420" height="315" src=output>
        </iframe>
    </div>

    <script language="javascript" type="text/javascript">

        function getLink() {
            var url = document.getElementById("link").value;
            console.log(url);
            output.innerHTML = url;
        }

    <script>

点击“提交”按钮后，播放器消失，文本显示在页面上，而不是在youtube播放器中更改网址并播放链接的视频。怎么了？

Answer 1

您尝试将iFrame的 .src 属性更改为输出-您的youtube视频的网址。那不是正确的方法。为此，您需要先为iFrame元素指定一个唯一的ID，例如 myIframe

现在我们可以使用设置/获取它的.src

IElement

因此，在您发布的示例中：

IElement::IElement(bool normalizeInput)
{
    if (normalizeInput)
    {
        this->SetInput= &IElement::SetInput_Sum;
    }
    else
    {
        this->SetInput= &IElement::SetInput_Const;
    }
}

document.getElementById("myIframe").src

Answer 2

我建议您了解javascript的基本知识，并在html中使用js。给定的代码中有很多错误，但是每个人都必须从某个地方开始。反正这是代码

<input type="text" id="link" placeholder="Insert link here">
<button onclick="getLink()">Submit</button>

<div id="output">
  <iframe width="420" height="315" id="video"></iframe>
</div>
<script>
function getLink() {
  var url = document.getElementById("link");
  var tag = youtube_parser(url.value);
  // You pass the src by this in js. In order to access youtube video in iframe, you have to use "https://www.youtube.com/embed/<videotag>" in src
  document.getElementById("video").src = "https://www.youtube.com/embed/"+tag;
  // This is totally optional but once the button is clicked then the input field is cleared
  url.value = '';
}

function youtube_parser(url){
    var regExp = /^.*((youtu.be\/)|(v\/)|(\/u\/\w\/)|(embed\/)|(watch\?))\??v?=?([^#\&\?]*).*/;
    var match = url.match(regExp);
    return (match&&match[7].length==11)? match[7] : false;
}
</script>

该YouTube解析器功能取自here

将Javascript变量传递到HTML代码中用作参数

2 个答案: