0

我有以下代码，我试图将 youtube 播放器嵌入到 html 页面中。

我在控制台上没有看到任何错误，但播放器没有添加到 html 页面上。

 <form name="urlReaderForm"  onSubmit=" return validateForm()" method="post">
    Url: <input type="text" name="url"><br>
   edit: Times: < input type="Number" name="times"<br>
    <input type="submit" type="submit" value="Submit">
 </form>
 <div id="youPlayer"></div>

<script>
    function validateForm() {
         var url=document.forms["urlReaderForm"]["url"].value;
         var loopCounter=document.forms["urlReaderForm"]["times"].value;

         var len = url.length;
         var vIDpos=url.indexOf("v=");
         var vID=url.substring(vIDpos+2,len-1);
         alert(''+vID);
         var html_var='';
         html_var ="<object style='height: 390px; width: 640px'> <param name='movie'       value='https://www.youtube.com/v/'"+vID+"'?version=3&feature=player_embedded&loop='"+loopCounter+"'&playlist='"+vID+"'><param name='allowFullScreen' value='true'><param name='allowScriptAccess' value='always'><embed src='https://www.youtube.com/v/'"+vID+"'?version=3&feature=player_embedded&loop='"+loopCounter+"'&playlist='"+vID+"' type='application/x-shockwave-flash' allowfullscreen='true' allowScriptAccess='always' width='425' height='344'></object>​";
        document.getElementById("youPlayer").innerHTML = html_var; 
     }
</script>
4

2 回答 2

1

上面的示例中有几个问题...

  • 表格上没有可供 var loopCounter=document.forms["urlReaderForm"]["times"].value;阅读的字段
  • 当您从表单中提取 URL 时，您会去掉最后一个字符。采用var vID=url.substring(vIDpos+2,len);
  • 除非您添加return false; 到脚本的末尾，否则它将重新加载页面，因此您将永远不会看到您的错误

我建议使用更现代的 iframe 嵌入，但如果您仍需要坚持使用您的解决方案，请尝试以下操作：

    function validateForm()
    {
    var url=document.forms["urlReaderForm"]["url"].value;
    //var loopCounter=document.forms["urlReaderForm"]["times"].value;
    loopCounter = 0;
    var len = url.length;
    var vIDpos=url.indexOf("v=");
    var vID=url.substring(vIDpos+2,len);
    alert(''+vID);
    var html_var='';
    html_var ="<object style='height: 390px; width: 640px'><param name='movie' value='https://www.youtube.com/v/"+vID+"?version=3&feature=player_embedded&loop='"+loopCounter+"'&playlist='"+vID+"'><param name='allowFullScreen' value='true'><param name='allowScriptAccess' value='always'><embed src='https://www.youtube.com/v/"+vID+"?version=3&feature=player_embedded&loop='"+loopCounter+"'&playlist='"+vID+"' type='application/x-shockwave-flash' allowfullscreen='true' allowScriptAccess='always' width='425' height='344'></object>";
    console.log(html_var);   
    document.getElementById("youPlayer").innerHTML = html_var; 
    return false;
    }
于 2012-12-25T18:23:14.610 回答
0

我必须同意之前关于内置嵌入代码的海报。为了给你两个新的想法，我自己在第二个站点上使用了一个和另一个。

<iframe width="640" height="360" src="http://www.youtube.com/embed/9m-L5InQZvM?feature=player_detailpage" frameborder="0" allowfullscreen></iframe>

对于嵌入式，我使用的第二个选项是我刚刚制作了一个包含视频和一般 iframe 的列表，只是为了有这样的目标

    <body class="center">
        <h2 class="media">Videos</h2>
            <ul id="list" class="videolist">
                <li class="videolist"><a href ="videos/firstVideo.html" title="" target="video-frame"></a></li>
                <li class="videolist"><a href ="videos/secondVideo.html" title=""></a></li>
            </ul>
            <iframe id="video-frame" src="" width ="600" height ="350" name="video-frame">
            </iframe>
    </body>

然后像这样将嵌入的代码放入单独的 .html 文件中

<!DOCTYPE html>
<iframe width="576" height="324" src="http://www.youtube.com/embed/FjCehYrEbO0?feature=player_detailpage">
Your browser does not support frames, please update your browser
</iframe>

但重点仍然是，使用 iframe 并且它仍然被认为是 HTML5 有效，即使框架可能不受欢迎，但这是一般用途。您仍然可以使用框架，但它们应该用于更大的目的，而不仅仅是因为它“更容易”分割/更新页面上的内容。

于 2012-12-25T18:53:41.423 回答