2012-08-30 240 views
2

我想知道如何将Youtube视频添加到html页面。我一直在寻找了几个小时,这里是我的尝试:用jwplayer嵌入youtube视频

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"  "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 

<html xmlns="http://www.w3.org/1999/xhtml"> 

<head> 
<script type='text/javascript' src='Scripts/swfobject.js'></script> 
<script type='text/javascript'> 
    swfobject.registerObject("playerID", "9.0.0"); 
</script> 
<script type='text/javascript' src='Scripts/mediaplayer/jwplayer.js'></script> 
</head> 
<body> 
<script type='text/javascript' src='Scripts/mediaplayer/jwplayer.js'></script> 

<div id='mediaplayer'></div> 

<script type="text/javascript"> 

    var flashvars = { 
     'file': 'http://www.youtube.com/watch?v=YE7VzlLtp-4', 
     'controlbar':  'bottom' 
    }; 

    var params = { 
     'allowfullscreen':  'true', 
     'allowscriptaccess':  'always' 
    }; 

    var attributes = { 
     'id':      'playerID', 
     'name':     'playerID' 
    }; 

    swfobject.embedSWF('Scripts/mediaplayer/player.swf', 'mediaplayer', '480', '360', '9', 'false', flashvars, params, attributes); 

</script> 
</body> 
</html> 

  <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 

      <html xmlns="http://www.w3.org/1999/xhtml"> 

      <head> 
      <script type='text/javascript' src='./Scripts/swfobject.js'></script> 
      </head> 
      <body> 
      <script type='text/javascript' src='./Scripts/mediaplayer/jwplayer.js'></script> 

      <div id='mediaspace'>This text will be replaced</div> 

      <script type='text/javascript'> 
       jwplayer('mediaspace').setup({ 
       'flashplayer': './Scripts/mediaplayer/player.swf', 
       'file': 'http://www.youtube.com/v/K_sev04KfeU?version', 
       'controlbar': 'bottom', 
       'width': '470', 
       'height': '320' 
       }); 
      </script> 
      </body> 
      </html> 

  <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 

      <html xmlns="http://www.w3.org/1999/xhtml"> 

      <head> 
      <script type='text/javascript' src='./Scripts/mediaplayer/jwplayer.js'></script> 

      </head> 
      <body> 


      <div id='mediaplayer'></div> 

      <script type="text/javascript"> 
       jwplayer('mediaplayer').setup({ 
       'flashplayer': './Scripts/mediaplayer/player.swf', 
       'id': 'playerID', 
       'width': '480', 
       'height': '270', 
       'file': 'XSGBVzeBUbk', 
       'provider': 'youtube', 
       'plugins': { 
        'hd-2': {} 
       } 
       }); 
      </script> 

      </body> 
      </html> 

变化(包括registerObject)的几十...我想知道如果有人能给我一个例子.zip链接。

回答

0

我通过将脚本标记移动到顶部解决了问题。感谢您的帮助。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml" lang="tr"> 
<head> 
<title>My Title</title> 
<script type="text/javascript" src="../Scripts/jwplayer/jwplayer.js"></script> 
<meta name="keywords" content="foreign trade, hazelnut, livestocks, sunflower, rice, wheat, lentil, sunflower oil" /> 
<meta name="description" content="Comparative Nutrition Values: Brown & White Grain Rice table" /> 
<meta http-equiv="content-type" content="text/html; charset=utf-8" /> 
<meta http-equiv="pragma" content="no-cache" /> 
<meta http-equiv="cache-control" content="no-store, no-cache, must-revalidate, post-check=0, pre-check=0" /> 
<meta http-equiv="expires" content="01 jan 1970 00:00:00 gmt" /> 
<meta http-equiv="last-modified" content="01 jan 1970 00:00:00 gmt" /> 
<meta http-equiv="if-modified-since" content="01 jan 1970 00:00:00 gmt" /> 
<link href="../css/main.css" rel="stylesheet" type="text/css" media="screen" /> 
<link rel="icon" type="image/x-ico" href="../favicon.ico" /> 
<link rel="shortcut icon" type="image/x-icon" href="../favicon.ico" /> 
</head> 
6

你可以用自己的例子脚本,然后修改路径到您上传的球员

<div id="movieframe"> 
<script type="text/javascript" src="http://www.mysite.com/jwplayer/jwplayer.js"></script> 
<div id="mediaspace" style='width:640px;height:480px;'></div> 
    <script type='text/javascript'> 
     jwplayer('mediaspace').setup({ 
      'flashplayer': 'http://www.mysite.com/jwplayer/player.swf', 
      'file': 'http://www.youtube.com/watch?v=YE7VzlLtp-4', 
      'image': 'http://www.mysite.com/graphics/splash.jpg', 
      'controlbar': 'bottom', 
      'width': '640', 
      'height': '480' 
     }); 
    </script> 
</div> 
</div> 

你需要调用这个脚本只有一次

<script type="text/javascript" src="http://www.mysite.com/jwplayer/jwplayer.js"> 

它可以在<head>标签或者在你展示它之前,但你不需要两者。 通常情况下,jwplayer.js和player.swf位于同一目录中。如果你没有包含正确的路径,它将不起作用 - 你的例子使用几种不同的路径。

+0

感谢您的回复。此代码无法使用本地html http://sudrap.org/paste/text/186014/ – nikel

+0

加载电影,路径需要指向您上传player.swf和jwplayer.js的位置。我不明白你的意思是由本地html –

+0

是的,这些文件在jwplayer文件夹中。我的意思是我没有测试服务器上的代码。 – nikel