Question

我有以下代码，我试图将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>

Answer 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;
    }

Answer 2

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

<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有效，即使帧可以不受欢迎，但这是一般用途。您仍然可以使用框架，但它们应该用于更大的目的，而不仅仅是因为它“更容易”分割/更新页面上的内容。

在html页面中使用object标签显示youtube视频

2 个答案: