Question

我想知道如何将Youtube视频放到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>
<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链接。

Answer 1

您可以使用他们的示例脚本并修改上传播放器的路径

<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在同一目录中。如果您没有包含正确的路径，那么它将不起作用 - 您的示例使用了几种不同的路径。

Answer 2

我通过将脚本标记移到顶部来解决问题。谢谢你的帮助。

<!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>

使用jwplayer嵌入youtube视频

2 个答案: