I want to open one .mp4 video in new window on clicking a link.
now, i am using this function to open new window:
function showCreateProfilePopup()
{
var myAjax = $.ajax({
url: '<?php echo $this->config->item('url'); ?>info/createProfileVideo',
type: "POST",
success: function(response) {
var windowWidth = 625;
var windowHeight = 500;
var centerWidth = (window.screen.width - windowWidth) / 2;
var centerHeight = (window.screen.height - windowHeight) / 2;
myWindow = window.open('','Video','width='+windowWidth+', height='+windowHeight+',scrollbars=no,resizable=no, innerWidth='+windowWidth+', innerHeight='+windowHeight+',left='+centerWidth+',top='+centerHeight);
myWindow.document.write(response);
myWindow.focus();
}
});
}
Definitely it opens window but, not same size for all Browser.
and after that it post to another view with one video
like
:
<video controls="controls" poster="<?php echo $this->config->item('content_url'); ?>/images/scrublyVideo.png" width="610" height="450">
<source src="<?php echo $this->config->item('content_url'); ?>video/createProfileHelpVideo.mp4" type="video/mp4" />
<object width='610' height='450' id='player' name='player'>
<param name="movie" value="<?php echo $this->config->item('content_url'); ?>video/createProfileHelpVideo.mp4" />
<param name="allowFullScreen" value="true" />
<param name="wmode" value="transparent" />
<param name="autoStart" value="false">
<img alt="Scrubly" src="<?php echo $this->config->item('content_url'); ?>/images/scrublyVideo.png" width="640" height="360" title="Scrubly Create Profile Help" />
<embed src='<?php echo $this->config->item('content_url'); ?>video/createProfileHelpVideo.mp4' type='Svideo/mp4' allowfullscreen='true' allowscriptaccess='always' width='600' height='450'/>
</object>
</video>
anyone tell me the easiest way to open video which supports by all the browsers(Mozilla, Chrome and safari) ?????
-Thanks a lot....
Okey,
i got the answer by using jwPlayer library.
-Thanks for your valuable response...
http://www.longtailvideo.com/support/jw-player/jw-player-for-flash-v5/22420/embedding-with-webm-and-mp4-source/
Related
Here is my code :-
<?php
$sql = "SELECT * FROM era_videos ORDER BY video_id";
$sqlex = mysqli_query($db,$sql);
$m = 1;
while($result = mysqli_fetch_assoc($sqlex))
{
?>
<div class="slide" current_id="<?php echo $m;?>" style="width:300px !important; height:200px !important;">
<object class="youtube" id="videoid<?php echo $m;?>" width="300" height="200"><param name="movie" value="https://www.youtube.com/v/<?php echo $result['urlname'];?>"version=3&hl=en_US&rel=0"> </param><param name="allowFullScreen" value="true"></param><param name="allowscriptaccess" value="always"></param><embed src="https://www.youtube.com/v/<?php echo $result['urlname'];?>"version=3&hl=en_US&rel=0" type="application/x-shockwave-flash" width="300" height="200" allowscriptaccess="always" allowfullscreen="true"></embed></object>
</div>
<?php
$m++;
}
?>
jQuery Code :-
jQuery('#iCarouselNext').click(function()
{
var current_id = parseInt($('.current').attr('current_id'));
var previous_id = current_id - 1;
$('#videoid'+previous_id).stopVideo();
});
But it throws an error - Uncaught TypeError: Object [object Object] has no method 'stopVideo'
I found this but no solution Stop a youtube video with jquery?
Thanks in advance
Use
$('#videoid'+previous_id).get(0).stopVideo();
Or
$('#videoid'+previous_id)[0].stopVideo();
Also there is an error in your logic of getting the current_id
var current_id = parseInt($('.current').attr('current_id'));
This will always give the first element's id.
I've came to an idea that looks very simple of how to hide video link to certain limit
Okay suppose we've
index.php
<?PHP
$media = 'http://www.some_site.com/get.php?id=2';
echo '<object id="mediaplayer" classid="clsid:22d6f312-b0f6-11d0-94ab-0080c74c7e95" codebase="http://activex.microsoft.com/activex/controls/mplayer/en/nsmp2inf.cab#version=5,1,52,701" standby="loading microsoft windows media player components..." type="application/x-oleobject" width="300" height="225">
<param name="filename" value="'.$media.'">
<param name="animationatstart" value="true">
<param name="transparentatstart" value="true">
<param name="autostart" value="true">
<param name="showcontrols" value="true">
<param name="ShowStatusBar" value="true">
<param name="windowlessvideo" value="true">
<embed type="application/x-mplayer2" src="'.$media.'" autostart="true" showcontrols="true" showstatusbar="1" bgcolor="white" width="300" height="225">
</object>';
?>
and get.php code
<?PHP
$id = $_GET['id'];
if ($id === '2') {
$file = "http://www.real_site.com/video/test.wmv";
echo $file;
} else {
echo "die well";
}
?>
so when we call http://www.some_site.com/get.php?id=2 it will brings http://www.real_site.com/video/test.wmv and it worked
i've noticed that it works fine even with youtube embedding code iframe vlc and the ugly brothers quicktime realplayer players ... etc but not with JW Player
here is the code of index.php for case of jwplayer
<?PHP
$media = 'http://www.some_site.com/get.php?id=2';
// suppose it leads to youtube link or of what jw player support
echo "<script type='text/javascript' src='player/jwplayer.js'></script>
<div id='mediaspace'>This text will be replaced</div>
<script type='text/javascript'>
jwplayer('mediaspace').setup({
'flashplayer': 'player/player.swf',
'file': '".$media."',
'controlbar': 'bottom',
'width': '300',
'height': '225',
'skin': 'player/schoon.zip'
});
</script>";
?>
it print this error
so is there any reason or this ! ~ that out helps me a lot
Under:
'file': '".$media."',
Add:
'provider': 'video',
You should be all set!
You need redirect to media file instead of print file url:
<?PHP
$id = $_GET['id'];
if ($id === '2') {
$file = "http://www.real_site.com/video/test.wmv";
//echo $file;
header('Location: '.$file);
} else {
echo "die well";
}
?>
Hey guys im trying to make a javscript function that will execute php code. This is what I have that should work I think.
<script type="text/javascript">
function doit()
{
$.get("dumplings.php");
return false; }
</script>
Dumplings.php contains this
<?php
$format = '<OBJECT style="z-index:2; position:absolute; top:20%; left:44%;" classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=6,0,0,0" WIDTH="320" HEIGHT="240" id="rice" ALIGN="">
<PARAM NAME=movie VALUE="rice.swf"> <PARAM NAME=quality VALUE=high> <PARAM NAME=bgcolor VALUE=#333399> <EMBED src="rice.swf" quality=high bgcolor=#333399 WIDTH="320" HEIGHT="240" NAME="rice" ALIGN="" TYPE="application/x-shockwave-flash" PLUGINSPAGE="http://www.macromedia.com/go/getflashplayer"></EMBED> </OBJECT>';
echo $format;
?>
Here is my radio button:
<input name="sample_check3" id="sample_check3" value="1" type="radio" onclick="doit();"/>
Basically, it just does nothing. Any idea why its not working?
it propbably does something but when you fetch your page with the php code you do nothing with the result
try changing it to something like this
$.get("dumplings.php", function (data){
$('body').append(data);
});
the data will contain the data from your php page. In this example I just add it to the body. but you can do anything with it.
You must use $.get on a one of your's page element (
<span>,<div>,<p>
)
After radiobutton add
<div id="loadobjecthere"></div>
And change script to
<script type="text/javascript">
function doit()
{
$("#loadobjecthere").get("dumplings.php");
return false;
}
</script>
Also try to change onclick attribute to
"javascript:return doit();"
I am using Facebox. I have to play mp3files in Facebox. I included facebox.js and facebox.css
My view code is:
<script type="text/javascript">
$(document).ready(function () {
$('a[rel*=facebox]').facebox();
}
</script>
$res= explode('/',$val['audio_file']);
<?=$res['1'];?>
I have to play this mp3 file in Facebox. Is it possible?
I have linked the mp3 file in anchor tag, then can I play that file in a facebox. Now it plays in big screen.
Include it in view
<script type="javascript">
$('#play').live('click', function(e) {
e.preventDefault();
link=this.href;
jQuery.facebox({ ajax: link });
});
</script>
<a id="play" href="<?=site_url('admin/test/playmp3/'.$val['id']);?>"><?=$res['1'];?></a>
Include it in controller
function playmp3($id)
{
$this->data['mp3'] = $this->test_model->getmp3($id);
$this->load->vars($this->data);
echo $this->load->view( $this->config->item('APP_template_dir').'admin/playmp3_view');
}
Create a new page playmp3_view and include it
<div style="">
<object type="application/x-shockwave-flash" data="<?=base_url().$this->config->item('APP_assets_admin').'/'.$this->config->item('APP_js');?>/player_mp3.swf" width="200" height="20">
<param name="movie" value="<?=base_url().$this->config->item('APP_assets_admin').'/'.$this->config->item('APP_js');?>/player_mp3.swf" />
<param name="FlashVars" value="mp3=<?=base_url().'uploads/'.$mp3->audio_file?>" /></object>
</div>
So I am using the jsplayer HTML5 player on my wordpress site, as well as some custom script to load in the next post and replace the old content once the video is finished:
$(document).ready(function(){
$(".video-js").livequery('ended', function(){
var sStr = "<?php echo get_permalink(get_adjacent_post(true,'',true)); ?>";
var adj_numb = "<?php
$adj = get_adjacent_post(true,'',true);
$numb = $adj->ID;
echo $numb
?>";
var cur_numb = "<?php echo $post->ID; ?>";
$.post(sStr, function(data) {
var content = $( data ).find( '#post-' + adj_numb);
$( "#post-" + cur_numb ).html( content );
var vid = VideoJS.setup( "vid" );
vid.play();
});
});
});
This works great, for 2 videos. It loads in the next video and plays it, and one after that, but after the 3nd video plays it just stops. I figure this means I have to sort of "reset" all my variables and start again from the beginning of the script, and that it's not doing this because of $(document).ready(function(), as it's already all loaded at this point.
Is there a standard way to loop through this script again, and re-set all the variables after its run once?
Or am I approaching the whole issue incorrectly?
Thanks!
Rendered JS:
$(document).ready(function(){
$(".video-js").livequery('ended', function(){
var sStr = "http://www.theloniousfilms.com/zachmath/volkswagon/";
var adj_numb = "94";
var cur_numb = "96";
$.post(sStr, function(data) {
var content = $( data ).find( '#post-' + adj_numb);
$( "#post-" + cur_numb ).html( content );
var vid = VideoJS.setup( "vid" );
vid.play();
});
});
});
HTML:
<div class="post-96 post type-post status-publish format-standard hentry category-zachmath" id="post-96">
<h2 id="director">Director Name</h2>
<h2 id="post_title">Post-Name
<span id="post_name">
"Hot Tub"
</span>
<span id="home">HOME</span>
<div class="entry">
<div class="video-js-box">
<!-- Using the Video for Everybody Embed Code http://camendesign.com/code/video_for_everybody --><br />
<video id="vid" class="video-js" width="640" height="360" preload autoplay poster="http://www.site.com/wp-content/uploads/2011/03/poster.jpg"><br />
<source src="http://d29zgp48wvs9kv.cloudfront.net/orkin.m4v" type='video/mp4; codecs="avc1.42E01E, mp4a.40.2"' /><br />
<source src="http://d29zgp48wvs9kv.cloudfront.net/orkin.ogv" type='video/ogg; codecs="theora, vorbis"' /><br />
<!-- Flash Fallback. Use any flash video player here. Make sure to keep the vjs-flash-fallback class. --><br />
<object class="vjs-flash-fallback" width="640" height="360" type="application/x-shockwave-flash"<br />
data="http://releases.flowplayer.org/swf/flowplayer-3.2.1.swf"><param name="movie" value="http://releases.flowplayer.org/swf/flowplayer-3.2.1.swf" /><param name="allowfullscreen" value="true" /><param name="flashvars" value='config={"playlist":["http://www.theloniousfilms.com/wp-content/uploads/2011/03/poster.jpg", {"url": "http://d29zgp48wvs9kv.cloudfront.net/orkin.m4v","autoPlay":true,"autoBuffering":true}]}' /><!-- Image Fallback. Typically the same as the poster image. --><br />
</object><br />
</video>
</div>
I ended up going with a different method, where I pulled all the posts URLs into a array, then iterated through each of them, going to the next item in an array once playback finished.