Вставка видео с ютуба с помощью jwplayer

Интересно, как поместить видео 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
person nikel    schedule 30.08.2012    source источник

Ответы (2)


arrow_upward
6
arrow_downward

Вы можете просто использовать их пример скрипта и изменить пути к тому месту, куда вы загрузили плеер.

<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 находятся в одном каталоге. Если вы не укажете правильный путь, он не будет работать — в ваших примерах используется несколько разных путей.

person Ascii Dude    schedule 30.08.2012
comment
Спасибо за ответ. этот код не может загрузить фильм с помощью локального HTML sudrap.org/paste/text/186014 - person nikel; 01.09.2012
comment
путь должен указывать на то, куда вы загрузили player.swf и jwplayer.js. Я не понимаю, что вы имеете в виду под локальным html - person Ascii Dude; 03.09.2012
comment
да, файлы находятся в папке jwplayer. Я имею в виду, что я не тестировал код на сервере. - person nikel; 03.09.2012
comment
Возможно, вам нужно протестировать его и вернуться и сказать, работает он или нет. - person Ascii Dude; 04.09.2012
comment
проблема сохраняется, когда я оставляю настройки DNS по умолчанию и проверяю страницу. - person nikel; 06.08.2013

arrow_upward
0
arrow_downward

Я решил проблему, переместив тег script наверх. Спасибо за помощь.

<!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>
person nikel    schedule 07.08.2013