文章/答案/技术大牛

发布

社区首页 >问答首页 >使用jwplayer嵌入youtube视频

问使用jwplayer嵌入youtube视频
EN

Stack Overflow用户

提问于 2012-08-30 17:33:26

回答 2查看 16.9K关注 0票数 2

我想知道如何把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链接。

html

jwplayer

回答 2

Stack Overflow用户

回答已采纳

发布于 2013-08-07 14:39:38

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

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

票数 0

Stack Overflow用户

发布于 2012-08-31 07:43:56

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

<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位于同一目录中。如果您没有包含正确的路径，它将无法工作-您的示例使用了几个不同的路径。

票数 6

页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持

原文链接：

https://stackoverflow.com/questions/12193884

复制

相似问题

问使用jwplayer嵌入youtube视频
EN

回答 2

Stack Overflow用户

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问使用jwplayer嵌入youtube视频EN

回答 2

Stack Overflow用户

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问使用jwplayer嵌入youtube视频
EN