在html頁面中使用對象標籤顯示YouTube視頻

我有以下代碼，我試圖將youtube播放器嵌入到html頁面中。在html頁面中使用對象標籤顯示YouTube視頻

我在控制檯上看不到任何錯誤，但播放器不添加在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>

來源

2012-12-25 bhavs

編輯，以包括時間比例 – bhavs

有一對夫婦的上述樣本中的問題......

沒有領域 var loopCounter=document.forms["urlReaderForm"]["times"].value;的形式
上閱讀時，提取從表單你帶的網址關閉最後一個字符。使用var vID=url.substring(vIDpos+2,len);
除非添加return false; 到腳本的末尾將重新加載因爲頁面，所以你永遠不會看到你的錯誤

我會建議使用更現代化的iframe embeddeding，但如果你仍然需要堅持你的解決方案，然後嘗試以下方法：

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-25 18:23:14 Offbeatmammal

是的return語句確實幫助我調試錯誤，我意識到有一些小的問題與html_var變量。我將更新與我對有關變量所做的所有更改的問題。 – bhavs

我有對內置的嵌入式代碼，以前的海報同意。爲了給你兩個新的想法，我自己在兩個場合使用一個和另一個場合做了這個。

<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-25 18:53:41 Angel

在html頁面中使用對象標籤顯示YouTube視頻

回答

相關問題