hi i am new on javascript and i have player name player.swf i am getting list of videos from the database like videos/dhoom3.flv and passing it from there to js and then to flash for that i have use
<script language="javascript" type="text/javascript">
function playFirstVid() // plays the first video when the page is loaded
{
sendToJavaScript("videos/dhoom3.flv");
}
function sendToJavaScript( id )
{
var name = getMovieName("player");
alert(id);
getMovieName("player").sendToFlash( id );
}
function getMovieName(movieName)
{
if (navigator.appName.indexOf("Microsoft") != -1)
{
return window[movieName];
}
else
{
return document[movieName];
}
}
</script>
Firstly is it right way ? For now its not showing my video in player of flash because it says sendToFlash function is missing so can anyone tell what to do next?
As Lukasz pointed out, if the function does not exist on the class, you can't call it. Assuming it is a public function, you can call any method on an swf by dot.notation.
mySWF.theFunctionName(myArguments);
Depending on how you wire your events (and I would recommend a unified event listener), it's just a matter of sending that numerically indexed string to your play method.
Note: The following is not using a unified listener, but is in keeping with you example.
<script language="javascript" type="text/javascript">
var videosArr = ["videos/dhoom3.flv", "videos/dhoom2.flv", "videos/dhoom1.flv"];
function playFirstVid() {
playVid(videosArr[0]);
}
function playVid(filename) {
var player;
if (navigator.appName.indexOf("Microsoft") != -1) {
player = window[movieName];
} else {
player = document.getElementById("player");
}
try {
player.sendToFlash(filename);
} catch (err) {
alert(err.message);
}
}
</script>
Related
I'm trying to run a function when my page id is true, which is working well and good, but I'm not able to get the values of the function.
What I wanted to achieve is I wanted to load the image URL from the calendar data, into the page which id is true for example if (page1) is true then I wanted to do a query search of image id in that page and load the image from the calendar data.
The getImageUrl(events[0].img); gives me the image URL correctly but when I run this function inside the if (page.id === "page1") {getImageUrl()} the image URL is undefined. Is there a way or a different workaround for this? Is this possible to do? Please advise me. I'm quite new to the development.
document.addEventListener("init", function (event) {
let page = event.target;
if (page.id === "page1") {
// if page id is true this function will execute but im not able to get the image says undefined how do i get the function working right.
getImageUrl();
} else if (page.id === "page2") {
//do something
}
});
//The below Queryselector id is avialble only for PAGE 1 where i want to run this function.
function getImageUrl(url) {
document.querySelector("#image-div").innerHTML += `<img src="${url}" />`;
}
//LOAD Calender and passing json ImageURLdata into the getImageUrl function
function loadCalender() {
$("#container").simpleCalendar({
onCalendarLoad : function (date, events) {
getImageUrl(events[0].img);
console.log(events[0].img);
}
}
I am not quite sure what you want. But I believe this is what you are trying.
document.addEventListener("init", function (event) {
let page = event.target;
var setImage = function (url) {
var imgDiv = document.getElementById("image-div");
var img = document.createElement('img');
img.src = url;
imgDiv.appendChild(img);
}
$("#container").simpleCalendar({
onCalendarLoad : function (date, events) {
if (page.id === 'page1') {
setImage(events[0].img);
} else if (page.id === 'page2') {
// do something else
}
}
}
}
I don't really get what you try to do here.
the getImageUrl(url) function is more a setImageUrl... you are setting a value
the getImageUrl does not return any value so again something which does not make sense at all please provide a better code
On my page I have following code, which I use for making some object a full screen one
<script>
$(document).ready(function(){
$('.fs-button').on('click', function(){
var elem = document.getElementById('fullscreen');
if (document.webkitFullscreenElement) {
document.webkitCancelFullScreen();
} else {
elem.webkitRequestFullScreen();
};
});
});
</script>
Problem is its working only in Chrome. Can you please give me cross browser version of this code? Cannot do this by myself because of poor JS knowledge.
You can use this.
Reference : https://msdn.microsoft.com/en-us/library/dn265028(v=vs.85).aspx
// Initiated by a user click on an element
function makeFullScreen(divObj) {
//Use the specification method before using prefixed versions
if (divObj.requestFullscreen) {
divObj.requestFullscreen();
}
else if (divObj.msRequestFullscreen) {
divObj.msRequestFullscreen();
}
else if (divObj.mozRequestFullScreen) {
divObj.mozRequestFullScreen();
}
else if (divObj.webkitRequestFullscreen) {
divObj.webkitRequestFullscreen();
} else {
console.log("Fullscreen API is not supported");
}
}
once after writing that function, you just need to call inside click event handler as..
$(document).ready(function(){
$('.fs-button').on('click', function(){
var elem = document.getElementById('fullscreen');
//call that function to make it fullscreen.
makeFullScreen( elem );
});
});
Is it possible to do a javascript action after play button is pushed? I know I will need to use onStateChange function form Youtube's API. But I really don't know where to start? Any help? Thank you.
--
I have also found something here: http://apiblog.youtube.com/2011/01/introducing-javascript-player-api-for.html
Here's a solution that you should be able to extend easily: http://jsbin.com/evagof
Hey here is the answer .
http://jsfiddle.net/masiha/4mEDR/
Enjoy ...let me know if you have more qtns
<script src="http://www.google.com/jsapi" type="text/javascript"></script>
<script type="text/javascript">
google.load("swfobject", "2.1");
</script>
<script type="text/javascript">
// Update a particular HTML element with a new value
function updateHTML(elmId, value) {
document.getElementById(elmId).innerHTML = value;
}
// This function is called when the player changes state
function onPlayerStateChange(newState) {
updateHTML("playerState", newState);
if(newState === 1){
//if the player is now playing
//add your code here
}
}
// This function is automatically called by the player once it loads
function onYouTubePlayerReady(playerId) {
ytplayer = document.getElementById("ytPlayer");
// This causes the updatePlayerInfo function to be called every 250ms to
// get fresh data from the player
setInterval(updatePlayerInfo, 250);
updatePlayerInfo();
ytplayer.addEventListener("onPlayerStateChange");
}
// The "main method" of this sample. Called when someone clicks "Run".
function loadPlayer() {
// The video to load
var videoID = "ylLzyHk54Z0"
// Lets Flash from another domain call JavaScript
var params = { allowScriptAccess: "always" };
// The element id of the Flash embed
var atts = { id: "ytPlayer" };
// All of the magic handled by SWFObject (http://code.google.com/p/swfobject/)
swfobject.embedSWF("http://www.youtube.com/v/" + videoID +
"?version=3&enablejsapi=1&playerapiid=player1",
"videoDiv", "480", "295", "9", null, null, params, atts);
}
function _run() {
loadPlayer();
}
google.setOnLoadCallback(_run);
</script>
<div id="videoDiv">Loading...</div>
<p>Player state: <span id="playerState">--</span></p>
http://code.google.com/apis/ajax/playground/?exp=youtube#polling_the_player
Maybe Youtube made some changes since this question was posted, but most of the answers didn't work. I found that the easiest way was to use the iframe_api (https://developers.google.com/youtube/iframe_api_reference)
Here is an example
https://thimble.webmaker.org/en-US/project/39354/edit
My javascript:
function onYouTubePlayerReady()
{
playerObj = document.getElementById("player_embed");
playerObj.addEventListener("onStateChange", test);
// Make sure the document is loaded before any DOM-manipulation
$(document).ready(function() {
// Update player information every 500ms
setInterval(updatePlayerInfo, 500);
});
}
function test(newState)
{
alert(newState);
}
My videos are loaded correctly and I can control fine them through my javascript. However the onStateChange event never seems to trigger. It never comes up with an alert when I'm playing/stopping/pausing videos etc. Anyone with a solution/similar problem?
You must pass the function name as a string to addEventListener.
playerObj.addEventListener("onStateChange", "test");
This format is for JQuery but the logic is same, create a function inside onYouTubePlayerReady to pass the playerId
$(document).ready(function() {
onYouTubePlayerReady = function(playerId) {
eventHandler=function(state){onStateChangeID(state,playerId);}
playerObj = document.getElementById("player_embed");
playerObj.addEventListener('onStateChange','eventHandler',false);
}
onStateChangeID=function(newState,playerId) {
console.log("onStateChange: ("+playerId+") " + newState);
}
});
I'm trying to use ExternalInterface.addCallback to allow js to call an as3 method. My code is as follows:
AS:
ExternalInterface.addCallback("sendToActionscript", callFromJavaScript);
function callFromJavaScript():void{
circle_mc.gotoAndStop("finish");
}
JS:
<button type="button" onclick="callToActionscript()">Switch to square</button>
<script type="text/javascript">
function callToActionscript() {
flashController = document.getElementById("jstoactest")
flashController.sendToActionscript();
}
</script>
It's not working. What am I doing wrong?
I set a isFlashReady flag in JS as FALSE. Then when your SWF is loaded, after Event.ADDED_TO_STAGE is fired, I add ExternalInterface.addCallback and flip isFlashReady flag to TRUE. This prevents a call to SWF before it's ready. You might want to throw alert() in JS functions below to see where it's stuck. Hope this helps.
JS:
var isFlashReady = false;
function thisMovie(movieName)
{
if (navigator.appName.indexOf("Microsoft") != -1)
return window[movieName];
}else{
return document[movieName];
}
function callToActionScript(value)
{
if(isFlashReady)
{
thisMovie("SWFID").sendToActionScript();
}
}
function flashReady(value)
{
isFlashReady = true;
}
AS:
if (ExternalInterface.available) {
try {
ExternalInterface.addCallback("sendToActionScript", callFromJavaScript);
flash.external.ExternalInterface.call(flashReady,true);
} catch (error:SecurityError) {
trace("A SecurityError occurred: " + error.message + "\n");
} catch (error:Error) {
trace("An Error occurred: " + error.message + "\n");
}
} else {
trace("External interface is not available for this container.");
}
make sure that AllowScriptAccess is set to "always" or "sameDomain" in embedding the flash and see if that helps. livedocs
Is your SWF file being served from the same Domain as your HTML page? If the domains differ then you will need to use Security.allowDomain to allow the two to communicate.
Also, I've found the easiest way to debug Flash -> JavaScript communication is to use FireBug for Firefox. (sorry I can only post one link!)