Re: [jPlayer] embed UDP video stream

1,612 views
Skip to first unread message

Mohamed Alam

unread,
Jun 28, 2012, 4:55:26 AM6/28/12
to jpl...@googlegroups.com
<!DOCTYPE html>
<html>
<head>
<meta charset=utf-8 />

<!-- Website Design By: www.happyworm.com -->
<title>Demo : jPlayer as a video playlist player</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="http://ajax.googleapis.com/ajax/libs/jquery/1.6/jquery.min.js"></script>
<script type="text/javascript" src="js/jquery.jplayer.min.js"></script>
<script type="text/javascript" src="js/jplayer.playlist.min.js"></script>
<script type="text/javascript">
//<![CDATA[
$(document).ready(function(){

new jPlayerPlaylist({
jPlayer: "#jquery_jplayer_1",
cssSelectorAncestor: "#jp_container_1"
}, [
{
title:"Big Buck Bunny Trailer",
artist:"Blender Foundation",
free:true,
},
{
title:"Finding Nemo Teaser",
artist:"Pixar",
},
{
title:"Incredibles Teaser",
artist:"Pixar",
}
], {
swfPath: "js",
supplied: "webmv, ogv, m4v"
});

});
//]]>
</script>
</head>
<body>
<div id="jp_container_1" class="jp-video jp-video-270p">
<div class="jp-type-playlist">
<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-previous" tabindex="1">previous</a></li>
<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-next" tabindex="1">next</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-shuffle" tabindex="1" title="shuffle">shuffle</a></li>
<li><a href="javascript:;" class="jp-shuffle-off" tabindex="1" title="shuffle off">shuffle off</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-title">
<ul>
<li></li>
</ul>
</div>
</div>
</div>
<div class="jp-playlist">
<ul>
<!-- The method Playlist.displayPlaylist() uses this unordered list -->
<li></li>
</ul>
</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>


On Wed, Jun 27, 2012 at 9:26 PM, maui <mauriz...@gmail.com> wrote:
Hi there,

I tried to embed an audio stream in a web page and it works fine.
(e.g. mp3:"http://mp3-vr-128.as34763.net/;stream/1")

I would like to embed a video stream in a web page but I cannot find any example/solution...
could you suggest a way to do it? and may be an url to test it?

Thank you,
Maurice

--
You received this message because you are subscribed to the Google Groups "jPlayer: HTML5 Audio & Video for jQuery" group.
To view this discussion on the web visit https://groups.google.com/d/msg/jplayer/-/wudKgfhwc3IJ.
To post to this group, send email to jpl...@googlegroups.com.
To unsubscribe from this group, send email to jplayer+u...@googlegroups.com.
For more options, visit this group at http://groups.google.com/group/jplayer?hl=en.

maui

unread,
Jun 29, 2012, 10:33:14 AM6/29/12
to jpl...@googlegroups.com
this example embed a video media, not a real data stream....

I would need to embed something like the following audio stream
mp3:"http://mp3-vr-128.as34763.net/;stream/1"
but with a video continous stream... e.g. a web tv
  (so /stream would be needed)

thank you
Maurice



On Wednesday, June 27, 2012 5:56:20 PM UTC+2, maui wrote:
Hi there,

I tried to embed an audio stream in a web page and it works fine.
(e.g. mp3:"http://mp3-vr-128.as34763.net/;stream/1")

I would like to embed a video stream in a web page but I cannot find any example/solution...
could you suggest a way to do it? and may be an url to test it?

Thank you,
Maurice

Mohamed Alam

unread,
Jun 29, 2012, 11:56:44 PM6/29/12
to jpl...@googlegroups.com


<?php ob_start();?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<link rel="stylesheet" href="css/style1a.css" type="text/css" />
<link href="skin/pink.flag/jplayer.pink.flag.css" rel="stylesheet" type="text/css" />


<title>Sunnada Cultural Center</title>
<script type="text/javascript" src="js/jquery.js"></script>
<script type="text/javascript" src="js/jslider-1.7.2.min.js"></script>
<script type="text/javascript" src="js/jquery-1.7.2.min.js"></script>
<script type="text/javascript" src="js/jslider.js"></script>
<script type="text/javascript" src="js/jquery.innerfade.js"></script>
<script type="text/javascript" src="js/animation.js"></script>
<script type="text/javascript" src="js/jquery.jplayer.min.js"></script>
<script type="text/javascript" src="js/jplayer.playlist.min.js"></script>

<script TYPE="text/javascript" LANGUAGE="JavaScript" SRC="js/sound.js"></script>

<script src="/audiojs/audio.min.js"></script>

<script language="javascript" type="text/javascript">
$(document).ready(function(){
   $(document).bind("contextmenu",function(e){
      return false;
   });
});
</script>


<script language="javascript" type="text/javascript">
 function Play (file) {
//var path = '<embed src="media/' + file + '.mp3" autostart="true" loop="false" hidden="true" height="0" width="0">';
//document.getElementById (file).innerHTML = path + '<img src="images/stop.gif" style="cursor:pointer;" onclick="Stop(' + "'" + file + "'" + ')">';
}
</script>


 
<script type="text/javascript">
//<![CDATA[

$(document).ready(function(){

// Local copy of jQuery selectors, for performance.
var my_jPlayer = $("#jquery_jplayer"),
my_trackName = $("#jp_container .track-name"),
my_playState = $("#jp_container .play-state"),
my_extraPlayInfo = $("#jp_container .extra-play-info");

// Some options
var opt_play_first = false, // If true, will attempt to auto-play the default track on page loads. No effect on mobile devices, like iOS.
opt_auto_play = true, // If true, when a track is selected, it will auto-play.
opt_text_playing = "Now playing", // Text when playing
opt_text_selected = "Track selected"; // Text when not playing

// A flag to capture the first track
var first_track = true;

// Change the time format
$.jPlayer.timeFormat.padMin = false;
$.jPlayer.timeFormat.padSec = false;
$.jPlayer.timeFormat.sepMin = " min ";
$.jPlayer.timeFormat.sepSec = " sec";

// Initialize the play state text
my_playState.text(opt_text_selected);

// Instance jPlayer
my_jPlayer.jPlayer({
ready: function () {
$("#jp_container .track-default").click();
},
timeupdate: function(event) {
my_extraPlayInfo.text(parseInt(event.jPlayer.status.currentPercentAbsolute, 10) + "%");
},
play: function(event) {
my_playState.text(opt_text_playing);
},
pause: function(event) {
my_playState.text(opt_text_selected);
},
ended: function(event) {
my_playState.text(opt_text_selected);
},
swfPath: "js",
cssSelectorAncestor: "#jp_container",
supplied: "mp3",
solution:"flash,html",
wmode: "window"
});

// Create click handlers for the different tracks
$("#jp_container .track").click(function(e) {
my_trackName.text($(this).text());
my_jPlayer.jPlayer("setMedia", {
mp3: $(this).attr("href")
});
if((opt_play_first && first_track) || (opt_auto_play && !first_track)) {
my_jPlayer.jPlayer("play");
}
first_track = false;
$(this).blur();
return false;
});

});
//]]>
</script>



</head>

<body>
<div id="mainwrapper">
<!--header-->

<?php 
include("elements/header.php");
?>

<!--Header Ending-->
<div class="clr"></div>
<div id="top2holder">
<?php
include("elements/leftmenu1.php");
?>

<div id="bannerholderouter">
<ul id="bannerholder">

</ul>
</div>
</div>

<!--End top2holder-->
<div class="clr"></div>
<!--maincontent part-->
<div id="maincontent">
<div id="maincontentinside"><!--leftside ends-->

<!--middlecontent-->


<div id="innerspace">

<?php 
include("elements/browseblock.php");
?>

<!--<div class="browseblock">
<ul>
<li class="strong1">Browse -: </li>
<li><a href="#">Free Download /</a></li>
<li><a href="#">Concert Excerpts / </a></li>
<li><a href="#">Bhajans / Slokas /</a></li>
<li><a href="#">Varna /</a></li>
<li><a href="#">Krithi /</a></li>
<li><a href="#">Tillana /</a></li>

</ul>

</div>-->

<br/>
<div class="alltrack">
<h1>Download / Play Tracks &gt;&gt;</h1>

</div>
<div class="line">
<img src="images/trakline.gif" height="2" width="755"/>

</div>
<!--<div id="recenttracksholder">
--><div id="recenttracks">
<div id="recenth1holder">

<h2>Most Recent Tracks >></h2>
</div>
<?php 
$qry=@mysql_query("select track_name,track_link,track_duration,track_price,artist_name,category_name,track_id_pk from tbl_track,tbl_category,tbl_artist where category_id_pk=category_id_fk and artist_id_pk=artist_id_fk and track_status=0 order by track_id_pk desc limit 3") or die(mysql_error());
//$rows=mysql_fetch_array($qry);
$count=0;
while($rows=mysql_fetch_array($qry))
{
$count++;
?>
<div id="recenttrackbox">

<div id="contentpart">

<h3><?php echo $rows['track_name']; ?></h3>
<p class="artist"><?php echo $rows['artist_name']; ?></p>
<p class="lenght"><?php echo $rows['track_duration']; ?></p>
</div>

<div id="jquery_jplayer"></div>

<div id="jp_container">
<ul>
<li>
<a href="music/<?php echo $rows['track_link'];?>" 
<?php 
if($count==1)
{
echo "class=\"track track-default\"";
}
else
{
echo "class=\"track\"";
}
    ?> id="track" class="jp-play" tabindex="1" >
<img src="images/play.png" width="26" height="20" title="Play"/>
</a>
</li>
<li><a href="music/<?php echo $rows['track_link'];?>" id="track" 
class="jp-stop" tabindex="1">
<img src="images/stop.gif" width="26" height="20" title="Stop"/>
</a></li>
   
</ul>
</div>


<div id="playbutton">


<a href="music1/<?php echo $rows['track_link'];?>" title="play" target="_blank">
<img src="images/play.png" width="26" height="20" border="0" id="Image2" onmouseover="MM_swapImage('Image2','','images/playover.png',1)" onmouseout="MM_swapImgRestore()" />
</a>
<a href="fdownload.php?f=<?php echo $rows['track_link'];?>">
<img src="images/pdownload.gif" width="26" height="20" />
</a>
</div>
</div>
<?php
}
?>
</div>

<div id="populartrack">

<div id="popularh1holder">
<h2>Most Popular Tracks >></h2>
<a href="#" class="all"></a></div>
<?php 
$qry=@mysql_query("select track_name,track_link,track_duration,track_price,artist_name,category_name,track_id_pk from tbl_track,tbl_category,tbl_artist where category_id_pk=category_id_fk and artist_id_pk=artist_id_fk and track_status=0 order by track_id_pk asc") or die(mysql_error());
//$rows=mysql_fetch_array($qry);
while($rows=mysql_fetch_array($qry))
{
?>
<div id="populartrackbox">
  <div id="contentpart">

<h3><?php echo $rows['track_name']; ?></h3>
<p class="artist"><?php echo $rows['artist_name']; ?></p>
<p class="lenght"><?php echo $rows['track_duration']; ?></p>
</div>

<div id="playbutton">

<a href="music/<?php echo $rows['track_link'];?>" title="play">
<img src="images/play.png" width="26" height="20" border="0" id="Image2" onmouseover="MM_swapImage('Image2','','images/playover.png',1)" onmouseout="MM_swapImgRestore()" />
</a>
<a href="fdownload.php?f=<?php echo $rows['track_link'];?>">
<img src="images/pdownload.gif" width="26" height="20" />
</a>
</div>
</div>
<?php
}
?>
<!---->



</div>




</div>


<!--End contentinside--->
<!--photosection-->


<!--endpicturesection-->




<!--middlecontent ends-->

<!--Leftcontent starts-->

<?php
include("elements/rightmenu.php");
?>
<div id="leftside">
<?php /*?><div id="recording">

<img src="images/recording.jpg" width="202" height="233" alt="latestest recording"/>

</div><?php */?>

<div id="news">

<h5>Press Release</h5>

<marquee direction="up" height="150"scrolldelay="150">

<?php
$sql = @mysql_query("SELECT news_article_name FROM tbl_newshighlights 
ORDER BY news_id_pk desc") 
or die(mysql_error());

while($rows = mysql_fetch_array($sql))
{
?>

<p><a href="pressrelease.php">
<?php echo $rows['news_article_name']; ?></a></p>

<?php
}
?>
</marquee>
</div>

<br />
<div id="browse">
<a href="onlinestore.php"><img src="images/browse.gif" width="200" height="72" alt="browse" border="0"/></a>

</div>
<div id="download">
<a href="freedownload.php"><img src="images/download.gif" width="200" height="72" alt="browse"/ border="0"></a>

</div>
</div>

<!--Leftcontent ends-->
</div>
<!--main contentinside ends here-->

</div>

<!--main content ends here-->
<?php
include("elements/footer.php");
?>
</div>
</body>
</html>
<?php ob_flush();?>


--
You received this message because you are subscribed to the Google Groups "jPlayer: HTML5 Audio & Video for jQuery" group.
To view this discussion on the web visit https://groups.google.com/d/msg/jplayer/-/libnuShjWJQJ.
Reply all
Reply to author
Forward
0 new messages