CODEWITHSUNDEEP
htmljwplayer
nikel
nikel

Reputation: 653

Embedding youtube videos with jwplayer

I wonder how to put Youtube videos to an html page. I've been searching for a few hours, here's what I tried:

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

and

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

and

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

and tens of variations (including registerObject)... I wonder if someone could give me an example .zip link.

Upvotes: 2

Views: 17037

Answers (2)

nikel
nikel

Reputation: 653

I solved the problem by moving script tag to the top. Thanks for the helps.

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

Upvotes: 0

Ascii Dude
Ascii Dude

Reputation: 392

You can just use their example script and modify the paths to where you uploaded the player

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

You need to call this script only once

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

It can be in the <head> tag or right before you're showing it, but you don't need both. Normally jwplayer.js and player.swf are in the same directory. If you don't include the correct path it will not work - your examples use several different paths.

Upvotes: 6

Related Questions