在 html 页面中使用对象标签显示 youtube 视频答案

【问题标题】：displaying a youtube video using object tag in a html page在 html 页面中使用对象标签显示 youtube 视频
【发布时间】：2012-12-25 17:47:02
【问题描述】：

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

【问题讨论】：

已编辑以包含时间字段

标签： javascript html youtube-api

【解决方案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;
    }

【讨论】：

是的，return 语句确实帮助我调试了错误，并且我意识到 html_var 变量存在一些小问题。我将用我对相关变量所做的所有更改来更新问题。

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

【讨论】：