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.
Related
I'm tryng to convert a webpage which use a flash video player to html5 <video> tag. This page use JS code to read the link of the file passing it to the flash player trought flashvars, the code is this
function justplay(link, title){
var playerobj = '<object classid="clsid:d27cdb6e-ae6d-11cf-96b8-444553540000" id="mainflashplayer" width="640" height="360"><param name="allowFullScreen" value="true" /> <param name="flashvars" value="file=' + link + '" /> <param name="wmode" value="direct" /> <param name="movie" value="' + playerurl + '" /><param name="AllowScriptAccess" value="always"><embed name="mainflashplayer" src="' + playerurl + '" AllowScriptAccess="always" wmode="direct" **flashvars="file=' + link + '"** width="640" height="360" allowFullScreen="true" type="application/x-shockwave-flash" /></object>';
document.getElementById('player').innerHTML = playerobj;
document.getElementById('playcontenttitle').innerHTML = title;
}
So, i'm tryng to pass file=' + link + ' to <video> tag using it as a src. In wich way can I do that?
I'm not completely sure what it is that you want but if you want to use the html video tag than you can use the following to accomplish what you want.
$(function() {
justPlay('http://clips.vorwaerts-gmbh.de/VfE_html5.mp4', 'My video');
});
function justPlay(link, title){
document.getElementById('player').setAttribute('src',link);
document.getElementById('playcontenttitle').innerHTML = title;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<p id="playcontenttitle"></p>
<video width="320" height="240" controls id="player">
<source src="movie.mp4" type="video/mp4">
<source src="movie.ogg" type="video/ogg">
Your browser does not support the video tag.
</video>
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.
I have a site that has YouTube's embedded video in it, my problem is, these videos don't obey the z-index rules. All the YouTube videos are displayed on top of all other elements. I tried
$('iframe','.video_container').attr('wmode','opaque');
$('iframe','.video_container').attr('z-index','1');
I found that the wmmode has to be changed to opaque, but isn't this for the old embedded videos??
How do i achieve this for both old embedded style videos and the new iframes??
Edit:
Even this didn't work on old embedded videos
$('object','.video_container').append('<param name="wmode" value="opaque"></param>').find("embed").attr('wmode', 'opaque');
this works on iframe videos
var src=$('iframe','.video_container').attr('src');
if(src.indexOf('?')==-1)
{
src=src+'?wmode=transparent';
}
else
{
src=src+'&wmode=transparent';
}
$('iframe','.video_container').attr('src',src);
but i still haven't found a way for old embed videos
This is the resultant code after manipulating using js that doesn't work
<object width="320" height="240">
<param name="movie" value="http://www.youtube.com/v/-SNytfkJD4U?version=3&hl=en_US&rel=0"/>
<param name="allowFullScreen" value="true"/>
<param name="allowscriptaccess" value="always"/>
<embed src="http://www.youtube.com/v/-SNytfkJD4U?version=3&hl=en_US&rel=0" type="application/x-shockwave-flash" width="320" height="240" allowscriptaccess="always" allowfullscreen="true" wmode="opaque"/>
<param name="wmode" value="opaque"/>
</object>
just alter your iframe src like this
http://www.youtube.com/embed/UUeRCDyVspR2M?wmode=transparent
so the flashplayer served by google will render like you told em with that parameter :)
you simply have to add ?wmode=transparent to the params or do it like this
http://www.youtube.com/embed/UUeRCDyVspR2M?param1=bla¶m2=foo&and_so_on=more&wmode=transparent
so you simply have to append
&wmode=transparent
to the end of the url
<script type="text/javascript">
var googleFooYou_tube = function(){
var objs = document.getElementsByTagName('object');
var length = objs.length;
for(var i=0; i<length; i++){
if(objs[i].className == 'video_container'){
var param = document.createElement('param');
param.name='wmode';
param.value='transparent';
var origEmbed = objs[i].getElementsByTagName('embed')[0];
var newEmbed = '<embed wmode="transparent" src="'+origEmbed.src+'" type="application/x-shockwave-flash" width="425" height="349" allowscriptaccess="always" allowfullscreen="true">';
objs[i].appendChild(param);
objs[i].removeChild(origEmbed);
objs[i].innerHTML=objs[i].innerHTML+newEmbed;
}
}
}
</script>
and your html code so far
<object width="425" height="349" class="video_container">
<embed src="http://www.youtube.com/v/-SNytfkJD4U?version=3&hl=en_US" type="application/x-shockwave-flash" width="425" height="349" allowscriptaccess="always" allowfullscreen="true"></embed>
<param name="movie" value="http://www.youtube.com/v/-SNytfkJD4U?version=3&hl=en_US"></param>
<param name="allowFullScreen" value="true"></param>
<param name="allowscriptaccess" value="always"></param>
</embed>
</object>
<script>googleFooYou_tube();</script> // added this at the bottom of your page
It's not usuable as it is... I mean the function... but you can alter it for your needs... and make it look more appealing if you want. It is just a quick and dirty approach and it works flawlessly.
You should add a param for wmode in the flash element which will be an object tag in your markup. Try to find the object element and try this
$('object','.video_container').append(
$("<param/>").attr({
'name': 'wmode',
'value': 'opaque'
})
).find("embed").attr('wmode', 'opaque');
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 + "' />....");
});
I'm wondering if someone could look over my code. I'm trying to pass a dummy variable from javascript to actionscript 3 with the following code:
HTML:
<object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000"
id="music_player" width="500" height="375"
codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab">
<param name="movie" value="music_player.swf" />
<param name="quality" value="high" />
<param name="bgcolor" value="#869ca7" />
<param name="allowScriptAccess" value="always" />
<embed src="music_player.swf" quality="high" bgcolor="#869ca7"
width="500" height="375" name="music_player" align="middle"
play="true" loop="false" quality="high" allowScriptAccess="always"
type="application/x-shockwave-flash"
pluginspage="http://www.macromedia.com/go/getflashplayer">
</embed>
</object>
Javascript:
var nextTrackLocation = "dummyString";
getFlashMovie("music_player").jsAlert(nextTrackLocation);
function getFlashMovie(movieName) {
var isIE = navigator.appName.indexOf("Microsoft") != -1;
return (isIE) ? window[movieName] : document[movieName]; }
and the actionscript:
ExternalInterface.addCallback("getNextTrack", jsAlert);
function jsAlert(mess){
ExternalInterface.call("alert", mess);
}
Does anyone see a mistake?
Your question is very confusing. I think you are making two mistakes here.
From Javascript you're trying to call a function in Actionscript called "jsAlert" but the function is in Actionscript exposed as "getNextTrack". I think it should be:
getFlashMovie("music_player").getNextTrack(nextTrackLocation);
Second, where you define the function in Actionscript you overlooked that the ExternalInterface.addCallback actually takes three parameters.
ExternalInterface.addCallback("getNextTrack", null, jsAlert);