I have one website that contains database of movies (like IMDB). I would like when user click on movie cover (image) a window of divxwebplayer to open and play avi file from server. I have try but no success.
inside img tag a i have added onclick function that calls showmyvideo(). then i write function showmyvideo() { } but i don't know how to write html code inside javascript function to be executed. here is my html code that needs to be executed inside showmyvideo() function:
<object classid="clsid:67DABFBF-D0AB-41fa-9C46-CC0F21721616" width="320" height="260" codebase="http://go.divx.com/plugin/DivXBrowserPlugin.cab">
<param name="custommode" value="none" />
<param name="autoPlay" value="false" />
<param name="src" value="film.avi" />
<embed type="video/divx" src="<?php echo $moviename ?>.avi" custommode="none" width="320" height="260" autoPlay="false" pluginspage="http://go.divx.com/plugin/download/"></embed>
Many Thanks.
i wouldlike when user click on image that divxweb player is openede on the screen and play avi file.
this is code that i im trying and traying but no go.please if some one can help me.
<!-- DivX Web Player -->
<a onClick="DivXWebPlayer('<?php echo $title; ?>', '<?php echo $year; ?>')" class="item-image">
function DivXWebPlayer(title, year)
{
$.ajax({
url: 'http://<?php echo $source; ?>/player.php?title='+title+'&year='+year,
success: function(data) {
$('#popup2').html('<div>' + data + '</div>');
},
error: function(request, error, errormessage) {
$("#messages").html(error + '\n' + errormessage);
}
});
e.preventdefault();
return false;
};
and a file player.php
<?php
/* get movie location */
$tit = $_GET['title'];
$yer = $_GET['year'];
$gen = $_GET['genre'];
?>
<div>
<object classid="clsid:67DABFBF-D0AB-41fa-9C46-CC0F21721616" width="320" height="260" codebase="http://go.divx.com/plugin/DivXBrowserPlugin.cab">
<param name="src" value="movie.divx"/>
<embed
type="video/divx"
src="./Drama/<?php echo $tit; ?> [<?php echo $yer; ?>].avi"
width="320" height="260"
pluginspage="http://go.divx.com/plugin/download/">
</embed>
</object>
</div>
any help welcome..where i was doing wrong?
You should use innerHTML.
Declare a element somewhere in your web page and keep the an id for ex, "demo". Something like:
<div id="demo">
</div>
Then, in the javascript function, do this:
function showmyvideo()
{
document.getElementById("demo").innerHTML="yourhtmlcode";
}
Related
Trying to delete 3 elements that are inside an iframe. Function "Delete" responsible for deleting the elements called on the element body onload doesn't run.
<html>
<script>
<?php
echo"function delete(){
var elem0=document.getElementById('".$_GET['id']."').contentWindow.document.getElementById('".$id."');
var elem1=document.getElementById('".$_GET['id']."').contentWindow.document.getElementById('".$id1."');
var elem2=document.getElementById('".$_GET['id']."').contentWindow.document.getElementById('".$id2."');
elem0.removeChild(elem0.childNodes[0]);
elem1.removeChild(elem1.childNodes[0]);
elem2.removeChild(elem2.childNodes[0]);
}"; ?>
</script>
<body onload="delete();">
<div>
<?php
$page=$_GET['id'].".html";
$id=down;
$id1=gerar1;
$id2=gerar;
echo '<iframe src="' .$page.'" id="'.$_GET['id'].'" frameBorder="0" width="70%" height="100%" align="left" scrolling="no" />';
echo '</iframe>';
?>
</div>
<div>
<?php
echo'<iframe src="../../galeria/frame2_galeria.html" frameBorder="0" width="29%" height="600px" align="right" scrolling="yes" />
</iframe>';
?>
</div>
</body>
</html>
delete() is a keyword thats why your function was not call
Use different function name instead of delete
So its Works ...!
I think the problem is that the iframe is not loaded done.
You just need to add the onload event handler to the iframe or something like setTimeout and put delete into it:
iframe.onload = function() { delete(); };
that should work.
As you can see below the code that I have is fully functional for reading an uploaded mp3 file from user and then pass it for flash player to play it.
if($uplfile !="")
$url = $my_base_url.$my_website_base."/modules/upload/attachments/".$uplfile;
else
$url = $this->get_template_vars('enc_url');
$info = pathinfo($url);
if ($info["extension"] == "mp3")
{
{/php}
<center>
<object type="application/x-shockwave-flash" data="{$my_base_url}{$my_website_base}/templates/{$the_template}/img/player_mp3_maxi.swf" width="200" height="20">
<param name="movie" value="{$my_base_url}{$my_website_base}/templates/{$the_template}/img/player_mp3_maxi.swf" />
<param name="bgcolor" value="#ffffff" />
{php}
echo ' <param name="FlashVars" value="'.urldecode($url).'" />
<param name="FlashVars" value="mp3='.$url.'&showstop=1&showinfo=1&showvolume=1" />
</object>
</center>';
However I want to use html5 player instead. I would say something like this.
<audio controls>
<source src=" **? Don't Know What to put ?** " type="audio/ogg">
<source src=" **? Don't Know What to put ?** " type="audio/mpeg">
</audio>
I tried all the possible thing to use for source in order to read the file but still could not to do so. Please be advise that I don't the filename and is unknown and will be uploaded by user.
Thanks in advance. this is the first time I'm using this website so please ignore if I didn't follow exactly the rules for asking question.
EDIT
I used the following code
I kept both the HTML5 and the javascript to see which one will work. I want to get rid of the swf flash which is working because of compatibility with mobile devices.
{php}
global $db,$my_base_url,$my_pligg_base;
$lid = $this->get_template_vars('link_id');
$uplfile = $db->get_var("select file_name from ".table_prefix."files where file_link_id='".$lid."' and file_size='orig'");
if($uplfile !="")
$url = $my_base_url.$my_pligg_base."/modules/upload/attachments/".$uplfile;
else
$url = $this->get_template_vars('enc_url');
$info = pathinfo($url);
if ($info["extension"] == "mp3")
{
{/php}
<audio controls>
<source src=" $url " type="audio/ogg">
<source src=" $url" type="audio/mpeg">
</audio>
<script type="text/javascript">
function music(track){
$('#audioPlayer').attr('src', track);
$('#audioPlayer').attr('autoplay', 'autoplay');
$.get();
}
function pauseAudio(){
$('#audioPlayer').get(0).pause();
}
</script>
<img alt="" onclick="music('http://www.raphmond.com/modules/upload/attachments/'); return false;" src="http://www.raphmond.com/templates/coolstrap/img/play.png">
<img alt="" onclick="pauseAudio(); return false;" src="http://www.raphmond.com/templates/coolstrap/img/pause.png">
<audio id="audioPlayer" src=""></audio>
<center>
<object type="application/x-shockwave-flash" data="{$my_base_url}{$my_pligg_base}/templates/{$the_template}/img/player_mp3_maxi.swf" width="200" height="20">
<param name="movie" value="{$my_base_url}{$my_pligg_base}/templates/{$the_template}/img/player_mp3_maxi.swf" />
<param name="bgcolor" value="#ffffff" />
{php}
echo ' <param name="FlashVars" value="'.urldecode($url).'" />
<param name="FlashVars" value="mp3='.$url.'&showstop=1&showinfo=1&showvolume=1" />
</object>
</center>';
This should work.
<audio controls src="where-you-keep-your-uploaded-file"></audio>
If a relative path does not work, try the full one (e.g. http://www.yourwebsite.com/music/user-file.mp3)
I once had to write a script like this, but I was using custom-made buttons to play/pause.
It was looking something like this and worked flawlessy.
HTML
<img alt="" onclick="music('http://www.my-website.org/media/myfile.mp3'); return false;" src="gfx/play.png">
<img alt="" onclick="pauseAudio(); return false;" src="gfx/pause.png">
<audio id="audioPlayer" src=""></audio>
JavaScript
function music(track){
$('#audioPlayer').attr('src', track);
$('#audioPlayer').attr('autoplay', 'autoplay');
$.get();
}
function pauseAudio(){
$('#audioPlayer').get(0).pause();
}
Assuming that your path is actually valid, there should be no problems.
lets say I have an image being displayed using the code:
<img src="image.png"/>
I would like to define the src using javascript, how would you do something like
<script>
function getImage ()
{
return "image.png";
}
</script>
<img src="Javascript:getImage()"/>
UPDATE:
I need it to work with the divx player, getting the video url paramater via javascript
<object classid="clsid:*************" width="320" height="260" codebase="http://go.divx.com/plugin/DivXBrowserPlugin.cab">
<param name="custommode" value="none" />
<param name="autoPlay" value="true" />
<param name="src" value="Javascript:GetURL()" />
<embed type="video/divx" src="Javascript:GetURL()" custommode="none" width="850" height="400" autoPlay="true" pluginspage="http://go.divx.com/plugin/download/">
</embed>
</object>
anyone have any ideas for this?
You should give your tags individual IDs, then do
src = 'image.png';
document.getElementById('param1').setAttribute('value', src);
document.getElementById('embed1').setAttribute('src', src);
<param id="param1" name="src" value="Javascript:GetURL()" />
<embed id="embed1" type="video/divx" src="Javascript:GetURL()" custommode="none" width="850" height="400" autoPlay="true" pluginspage="http://go.divx.com/plugin/download/">
You have to assign the image an ID, then use this:
document.getElementById('img_id').src="new_image.jpg";
You can dynamically write in the embed code with the video URL with document.write(), but you should only do this when the page loads.
I want to be able to change the swf file showing on a page using the code below (with the comment turned into real code)
Is this possible??
jquery:
$("div.360container > p").click( function() {
// show different swf by changing the value of the first param and src of the embed
});
html:
<div class="mycontainer" style='padding:2px;'>
<object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=9,0,28,0" width="650" height="350">
<param name="movie" value="/mySwf.swf" />
<param name="quality" value="high" />
<param name="wmode" value="opaque" />
<embed src="/mySwf.swf" quality="high" wmode="opaque" pluginspage="http://www.adobe.com/shockwave/download/download.cgi?P1_Prod_Version=ShockwaveFlash" type="application/x-shockwave-flash" width="650" height="350"></embed>
</object>
<p>click to change...</p>
</div>
Most reliable way to do that would be to set innerHTML of the element to your HTML. So, using jquery:
$("div.360container > p").click( function() {
// show different swf by changing the value of the first param and src of the embed
$(".mycontainer").html("<object ....><param name='movie' value='" + movieUrl + "' />....");
});
this code is suppose to do, is when the user clicks the image in the #thummbnails_div, the Text in #show_div is replaced with the youtube video with that ID . Since i am new here i can't post images. So the code to insert an image is incorrect i know. Thanks in advance.
<script type="text/javascript"> $(document).ready(function(){$("#thumbnails_div img").click(function(){ var youtubeID=$(this).attr("id"); $("#show_div").empty(); $("#show_div").append("<object width="425" height="355"><param name="movie" value="http://www.youtube.com/v/+youtubeID+rel=1"></param><param name="wmode" value="transparent"></param><embed src="http://www.youtube.come/v/"+youtubeID+"$rel=1" type="application/x-shockwave-flash" wmode="transparent" width="425" height="355"></embed></object>"); }); }); </script> <divid="show_div">Click pic below to see video</ div> <div id="thumbnails_div"><image id="OrgSdZH_rkU" src="http://img.youtube.com/vi/OrgSdZH_rkU/default.jpg" /></div>
Your quotes are so wrong in the jQuery append method, it looks like this when you try to beautify the code
$(document).ready(function () {
$("#thumbnails_div img").click(function () {
var youtubeID = $(this).attr("id");
$("#show_div").empty();
$("#show_div").append("<object width="
425 " height="
355 "><param name="
movie " value="
http: //www.youtube.com/v/+youtubeID+rel=1"></param><param name="wmode" value="transparent"></param><embed src="http://www.youtube.come/v/"+youtubeID+"$rel=1" type="application/x-shockwave-flash" wmode="transparent" width="425" height="355"></embed></object>"); }); });
You need to escape your double quotes with \ or you should use a single quote to surround the string. JavaScript 101.