Can we play HLS or HDS streaming through jPlayer?

1,971 views
Skip to first unread message

Amit Kumar

unread,
Mar 27, 2014, 2:29:48 PM3/27/14
to jpl...@googlegroups.com
Hi,

We need to play HLS or HDS streaming on website. Can we do this with jPlayer? if yes please provide us sample code.


Regards,
Amit

Vivian Chiu

unread,
Jul 15, 2014, 4:06:10 AM7/15/14
to jpl...@googlegroups.com
try this with your jPlayer: 

<!DOCTYPE html>
<html>
<head>
<meta charset=utf-8 />
<title>Testing Video Player - Streaming</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<link href="skin/blue.monday/jplayer.blue.monday.css" rel="stylesheet" type="text/css" />
<script type="text/javascript" src="//code.jquery.com/jquery-1.11.0.min.js"></script>
<script type="text/javascript" src="js/jquery.jplayer.min.js"></script>
  <script type="text/javascript">
//<![CDATA[
    $(document).ready(function(){
      $("#jquery_jplayer_1").jPlayer({
        ready: function () {
          $(this).jPlayer("setMedia", {
            title: "Streaming HLS",
            poster: "/video/Wildlife.jpg"
          });
        },
        swfPath: "js",
supplied: "m3u8v",
size: {
width: "640px",
height: "360px",
cssClass: "jp-video-360p"
},
smoothPlayBar: true,
keyEnabled: true,
remainingDuration: true,
toggleDuration: true
      });
    });
//]]>
  </script>
</head>
<body>
<h1>Testing jPlayer - Streaming HLS (m3u8v)</h1>
  <div id="jp_container_1" class="jp-video jp-video-360p">
    <div class="jp-type-single">
      <div id="jquery_jplayer_1" class="jp-jplayer"></div>
      <div class="jp-gui">
        <div class="jp-video-play">
          <a href="javascript:;" class="jp-video-play-icon" tabindex="1">play</a>
        </div>
        <div class="jp-interface">
          <div class="jp-progress">
            <div class="jp-seek-bar">
              <div class="jp-play-bar"></div>
            </div>
          </div>
          <div class="jp-current-time"></div>
          <div class="jp-duration"></div>
          <div class="jp-controls-holder">
            <ul class="jp-controls">
              <li><a href="javascript:;" class="jp-play" tabindex="1">play</a></li>
              <li><a href="javascript:;" class="jp-pause" tabindex="1">pause</a></li>
              <li><a href="javascript:;" class="jp-stop" tabindex="1">stop</a></li>
              <li><a href="javascript:;" class="jp-mute" tabindex="1" title="mute">mute</a></li>
              <li><a href="javascript:;" class="jp-unmute" tabindex="1" title="unmute">unmute</a></li>
              <li><a href="javascript:;" class="jp-volume-max" tabindex="1" title="max volume">max volume</a></li>
            </ul>
            <div class="jp-volume-bar">
              <div class="jp-volume-bar-value"></div>
            </div>
            <ul class="jp-toggles">
              <li><a href="javascript:;" class="jp-full-screen" tabindex="1" title="full screen">full screen</a></li>
              <li><a href="javascript:;" class="jp-restore-screen" tabindex="1" title="restore screen">restore screen</a></li>
              <li><a href="javascript:;" class="jp-repeat" tabindex="1" title="repeat">repeat</a></li>
              <li><a href="javascript:;" class="jp-repeat-off" tabindex="1" title="repeat off">repeat off</a></li>
            </ul>
          </div>
          <div class="jp-details">
            <ul>
              <li><span class="jp-title"></span></li>
            </ul>
          </div>
        </div>
      </div>
      <div class="jp-no-solution">
        <span>Update Required</span>
        To play the media you will need to either update your browser to a recent version or update your <a href="http://get.adobe.com/flashplayer/" target="_blank">Flash plugin</a>.
      </div>
    </div>
  </div>
</body>
</html>
Reply all
Reply to author
Forward
0 new messages