Monday, November 5, 2012

JW player for flash, vedio streaming and HTML5 video



JW player is a wonderful vedio and HTML5  player. JW player can be downloaded from:
http://www.longtailvideo.com/players

JW player supports HTML5 video format:
Video Formats*: H.264 / MP4 (.mp4), VP8 / WebM (.webm), Ogg Theora (.ogv)
Sound Formats*: AAC (.aac, .m4a), MP3 (.mp3), Ogg Vorbis (.ogg)


Example script for HTML5 video:
<script type="text/javascript" src="/jwplayer/jwplayer.js"></script>

<video height="270" width="480" id="myVideo">
  <source src="/static/bunny.mp4" type="video/mp4">
  <source src="/static/bunny.webm" type="video/webm">
</video>


<script type="text/javascript">
  jwplayer("myVideo").setup({
    modes: [
        { type: 'html5' },
        { type: 'flash', src: '/jwplayer/player.swf' }
    ]
  });
</script>


JW player supports ordinary video formats:
Video Formats: H.264 (.mp4, .mov, .f4v), FLV (.flv), 3GPP (.3gp, .3g2), YouTube
Sound Formats: AAC (.aac, .m4a), MP3 (.mp3)
Image Formats: JPEG (.jpg), PNG (.png), GIF (.gif) 


Example for JW embedder:
<div id="container">Loading the player ...</div>

<script type="text/javascript">
    jwplayer("container").setup({
        flashplayer: "/jwplayer/player.swf",
        file: "/uploads/video.mp4",
        height: 270,
        width: 480
    });
</script>


Example JW player combining with swfobject-2.2, here image is the first page of the video
<script type='text/javascript' src='swfobject-2.2.js'></script>

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

<script type="text/javascript">

   var flashvars = {
      'file':   '/videos/bunny.mp4',
      'image':  '/thumbs/bunny.jpg'
   };
   
   var params = {
      'allowfullscreen':        'true',
      'allowscriptaccess':      'always'
   };

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

   swfobject.embedSWF('player.swf', 'mediaplayer', '480', '270', '9', 'false',
       flashvars, params, attributes);
   
</script>


JW player also support RTMP Streaming from Flash Media Server:
Example
<div id='container'>The player will be placed here</div>

<script type="text/javascript">
  var flashvars = {

    file:'library/clip.mp4',
    streamer:'rtmp://www.myserver.com/ondemand/',

   image: '/thumbs/bunny.jpg'
  };

  swfobject.embedSWF('player.swf','container','480','270','9.0.115','false', flashvars,

   {allowfullscreen:'true',allowscriptaccess:'always'},
   {id:'jwplayer',name:'jwplayer'}

  );
</script>

No comments:

Post a Comment