im trying to replace a 3D cube with images with video to add on each face, I'm having problems trying to figure out how to replace the html tag with a html video element tag..
My jsfiddle can be seen below
http://jsfiddle.net/sean3200/W4pGa/
Here's the beginning of the code where the image is being created...
function start3d(texture_image) {
var screen_canvas = document.getElementById('canvas');
Here is the bottom of my code where the image is being loaded
var img = new Image();
img.onload = function() { start3d(img); };
img.src = 'http://content.bitsontherun.com/thumbs/3XnJSIm4-640.jpg';</script>
I know on how to create and load a video via html5 but puting it on each cube is a bit different.. any help on this would be appreciated!! thanks
Put this code inside your div
<object width="400" height="400"><param name="movie" value="http://www.youtube.com/v/YLorLVa95Xo?fs=1&hl=en_GB&rel=0"></param><param name="allowFullScreen" value="true"></param><param name="allowscriptaccess" value="always"></param><embed src="http://www.youtube.com/v/YLorLVa95Xo?fs=1&hl=en_GB&rel=0" type="application/x-shockwave-flash" allowscriptaccess="always" allowfullscreen="true" width="400" height="400"></embed></object>
or use javascript to set videeo on second div of cube class if you have it in html body:
$('.cube > div').eq(1).html('<object width="360" height="360"><param name="movie" value="http://www.youtube.com/v/YLorLVa95Xo?fs=1&hl=en_GB&rel=0"></param><param name="allowFullScreen" value="true"></param><param name="allowscriptaccess" value="always"></param><embed src="http://www.youtube.com/v/YLorLVa95Xo?fs=1&hl=en_GB&rel=0" type="application/x-shockwave-flash" allowscriptaccess="always" allowfullscreen="true" width="360" height="360"></embed></object>');
It is working fine in chrome, If it works in safari and firefox, please reply back.
Related
i have a video link that is in iframe i want to get alert when video will ended. i am doing something like this
var vid = document.getElementById("viddler-videoid");
vid.ended = function() {
alert("code here");
};
<iframe id="viddler-videoid" src="//www.viddler.com/embed/videoid/?f=1&autoplay=1&player=mini&make_responsive=0&hideFullScreenControl=true" width="497" height="375" frameborder="0" scrolling="no" allowfullscreen></iframe>
can any one help me for this.
Update:
Actually i am facing browser problem with my old code. previously i am using this code showing below
<object width="497" height="375" id="viddlerOuter-videoId" type="application/x-shockwave-flash" data="//www.viddler.com/mini/videoid/">
<param name="movie" value="//www.viddler.com/mini/videoid/">
<param name="allowScriptAccess" value="always">
<param name="allowNetworking" value="all">
<param name="allowFullScreen" value="true">
<param name="flashVars" value="f=1&autoplay=t&hideablecontrolbar=1&enablecallbacks=t&disableseek=1&disablebranding=1&loop=0&nologo=1&hd=1&initialVolume=50">
<object id="viddlerInner-videoid">
<video id="viddlerVideo-videoid" src="//www.viddler.com/file/videoid/html5mobile?openURL=di" type="video/mp4" width="497" height="375" poster="//www.viddler.com/thumbnail/id/" controls="controls" x-webkit-airplay="allow"></video>
</object>
</object>
function playEnded() {
jwplayer('mediaspace').play();
}
this was working fine on firefox and chrome but now this code is running firefox only. in chrome browser video is not playing. that is why i update me video code with iframe. iframe video is running but 2nd video is not play which should be play after ended iframe video.
I'd like to open a SoundCloud player in a new window when a user clicks a link. Below is an example:
<object height="220" width="220"><param name="movie" value="https://player.soundcloud.com/player.swf?url=https%3A//api.soundcloud.com/tracks/124173519&color=ff5500&auto_play=false&player_type=artwork"></param><param name="allowscriptaccess" value="always"></param><embed allowscriptaccess="always" width="220" height="220" src="https://player.soundcloud.com/player.swf?url=https%3A//api.soundcloud.com/tracks/124173519&color=ff5500&auto_play=false&player_type=artwork" type="application/x-shockwave-flash"></embed></object>
I've tried various tricks, but to no avail. If a user could point me in the right direction, it would be greatly appreciated.
Create something like: <a href='javascript:window.open("page.html")' target="_blank" >link</a> where you include the <object ../> tag in 'page.html'.
if you can dynamically generate the object with a complete html, you can use javascript:
window.open(URL,name,specs,replace)
Example of Server side script:
//playsound.php
<html>
<head>
.....
</head>
<body>
......
<object height="220" width="220"><param name="movie" value="https://player.soundcloud.com/player.swf?url=https%3A//api.soundcloud.com/tracks/124173519&color=ff5500&auto_play=false&player_type=artwork"></param><param name="allowscriptaccess" value="always"></param><embed allowscriptaccess="always" width="220" height="220" src="https://player.soundcloud.com/player.swf?url=https%3A//api.soundcloud.com/tracks/124173519&color=ff5500&auto_play=false&player_type=artwork" type="application/x-shockwave-flash"></embed></object>
</body>
</html>
So if a user clicks on the link in the main window, another window pops up to play the media. I hope this helps
I have a youtube video embedded, just like this:
<object width="640" height="360">
<param name="movie" value="https://www.youtube.com/v/M7lc1UVf-VE?version=3"></param>
<param name="allowFullScreen" value="true"></param>
<param name="allowScriptAccess" value="always"></param>
<embed src="https://www.youtube.com/v/M7lc1UVf-VE?version=3" type="application/x-shockwave-flash" allowfullscreen="true" allowScriptAccess="always" width="640" height="360"></embed>
</object>
Then I am replacing its src attribute using JS:
function replaceSrc()
{
document.getElementsByTagName("embed")[0].src = "new_link";
}
if (window.addEventListener){
window.addEventListener('load', replaceSrc, false);
} else if (window.attachEvent) {
window.attachEvent('onload', replaceSrc);
}
The function above will set a new src attribute, but it wont play a youtube video according to the new link. I need to make a reload of the youtube video in HTML with a newly set src attribute. Any suggestions? No YouTube API.
It isn't pretty but you could add a generated number as a href-suffix.
http://youtube.com/VideoOfACat?RandomVariable
Gets you a refreshed version of the clip
Basically you can put whatever you want after the ?, the browser still refreshes the link.
Simplest would perhaps be a global variable that get 1++ each reload.
I am answering my own question, and I want to give it as a warning for those having the same issue in the future: the posisition of your JS function matters!!
I have implemented such code
<script>
function replaceSrcc() {
var elem = document.getElementsByTagName("embed")[0];
copy = elem.cloneNode();
copy.src = "https://www.youtube.com/v/SKQeNnNT_Vg?version=3";
elem.parentNode.replaceChild(copy, elem);
}
if (window.addEventListener){
window.addEventListener('load', replaceSrcc, false);
} else if (window.attachEvent) {
window.attachEvent('onload', replaceSrcc);
}
</script>
Firstly, I put it into <head> tag, along with other JS functions defined for another stuff in my page. It did not work. Then, as a last option, I put it into <body> tag and now it works. Kind of crazy, however, it is a fact.
I have been bashing my head against this for a while now and need some fresh eyes:
I am trying to use the youtube JS api to call a function when the embedded videos state changes. But for some reason the event dosnt seem to be firing and I'm not getting any error in the console.
HTML:
<object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" width="630" height="350" id="bannerVideo">
<param name="movie" value="http://www.youtube.com/v/6Yfd1uGYgk8?enablejsapi=1&version=3&playerapiid=ytplayer" />
<param name="allowfullscreen" value="true" />
<param name="allowscriptaccess" value="always" />
<!--[if !IE]>-->
<object type="application/x-shockwave-flash" data="http://www.youtube.com/v/6Yfd1uGYgk8?enablejsapi=1&version=3&playerapiid=ytplayer" width="630" height="350">
<param name="allowfullscreen" value="true" />
<param name="allowscriptaccess" value="always" />
<!--<![endif]-->
<a href="http://www.adobe.com/go/getflashplayer">
<img src="http://www.adobe.com/images/shared/download_buttons/get_flash_player.gif" alt="Get Adobe Flash player" />
</a>
<!--[if !IE]>-->
</object>
<!--<![endif]-->
</object>
Javascript:
function onYouTubePlayerReady(playerId) {
//alert(playerId);
ytplayer = document.getElementById("bannerVideo");
//alert(2);
ytplayer.addEventListener("onStateChange", "onytplayerStateChange");
//alert(3);
//ytplayer.addEventListener("click", function(){alert('click');});
}
function onytplayerStateChange(newState) {
alert("Player's new state: " + newState);
}
Example site:
http://dev.stewartknapman.com/ytPlayer/
The code I am using is a direct copy & paste from the youtube api site and I am using swf object to embed the code. I am using the static embedding because I will be changing some stuff out with php, but this shouldn't matter... right?
I moved all the code out into its own file just for testing and its hosted on my development server so it shouldn't be a sandbox issue.
I have also tried alerting after every line just to make sure the addEventListener function is not failing. (I have left the alerts in my example code but commented them out.)
After searching previous posts about this error I have found that they were all solved by adding the ID to the right element or parsing the callback function as a string. So I double and triple checking these things but that doesn't seem to be the issue.
Any help would be greatly appreciated.
Have you tried initializing the flash embed using the SWFObject method (as outlined on the YouTube API)?
var params = { allowScriptAccess: "always" };
var atts = { id: "myytplayer" };
swfobject.embedSWF("http://www.youtube.com/v/VIDEO_ID?enablejsapi=1&playerapiid=ytplayer&version=3",
"ytapiplayer", "425", "356", "8", null, null, params, atts);
Replace your tags with the above and configure it to your setup.
My Site is: http://butplaygames.com
Here is the code i am putting in my footer right before the body tag:
<script type='text/javascript'>
<!--
(function(i,w,d,p,c,e,s,t){t=d.getElementsByTagName('script');if(!w[i]){w[i]={ads:[]};s=d.createElement('script');s.src='http'+(d.location.protocol=='https:'?'s://server':'://cdn')+'.cpmstar.com/cached/js/global_v100.pack.js';s.type='text/javascript';s.async='';t[0].parentNode.insertBefore(s,t[0]);}
p['poolid'] = myidherewhichiput;
c['background'] = null;
c['close'] = null;
c['type'] = 'game';
w[i].ads.push({params:p,config:c,events:e,overlay:-1,s:t[t.length-1]});})('cpmstar',window,document,{},{},{});
//-->
</script>
My game embed code for flash:
<object classid="clsid:d27cdb6e-ae6d-11cf-96b8-444553540000" codebase="http://fpdownload.macromedia.com/pub/shockwave/cabs/flash/swflash.cab" width="800" height="600" id="TreasureTrash">
<param name="movie" value="MYURL" />
<embed src="MYURL" allowfullscreen="true" allowScriptAccess="always" wmode="opaque" width="800" height="600" name="TreasureTrash" type="application/x-shockwave-flash" pluginspage="http://www.adobe.com/go/getflashplayer" />
<param name="allowfullscreen" value="true" />
<param name="wmode" value="opaque">
</embed></object>
The code works in Firefox, Chrome and Opera. But not in IE. Kindly help. I am very lost here. My site is butplaygames.
An AD is supposed to show over my flash games using the javascript code. It shows in Opera, Firefox and Chrome. But does not show in IE. IE does not even show any errors. It just makes the entire swf into a small dot and does nothing.
The script needs to read the .swf from the src atribute. In your case, in the src atribute there is no .swf there.