I use this js to create a jwplayer.
<script language="javascript" type="text/javascript" src="embed/swfobject.js"></script>
<div id="playerContainer">player should load here</div>
<script language="javascript" type="text/javascript">
var flashvars = {};
flashvars.linkfromdisplay = "true";
flashvars.autostart = "true";
flashvars.height = "480";
flashvars.width = "640";
flashvars.volume = "90";
flashvars.repeat = "false";
flashvars.displayheight = "640";
flashvars.displaywidth = "480";
flashvars.skin = "embed/minimal.zip";
flashvars.stretching = "exactfit";
flashvars.file = "http://" +
escape("1.1.1.1/stream.php");
var params = {};
params.menu = "true";
params.allowscriptaccess = "always";
params.allowfullscreen = "true";
params.wmode = "transparent";
var attributes = {};
attributes.id = "playerContainer";
attributes.wmode = "transparent";
attributes.name = "playerContainer";
swfobject.embedSWF("jwplayer/player.swf",
"playerContainer", "640", "480", "8","expressInstall.swf", flashvars,
params, attributes);
</script>
This works fine but when there is any problem and the stream is down or not found, I want to stream another link.
You can use onError() to do this.
Here is a demo:
http://support.jwplayer.com/customer/portal/articles/1442607-example-a-custom-error-message
Code:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Displaying a Custom Error Message</title>
<link rel="icon" type="image/x-icon" href="http://www.jwplayer.com/wp-content/themes/jwplayer-105/favicon.ico">
<script type='text/javascript' src='http://p.jwpcdn.com/6/8/jwplayer.js'></script>
<style type="text/css">
body {
margin: 0; padding: 0
}
</style>
</head>
<body>
<div id="container"></div>
<script>
jwplayer("container").setup({
file: "rtmp://fms.12E5.edgecastcdn.net/0012E5/videos/Qvxp3Jnv-68183.flv",
//file: "rtmp://fml.12E5.edgecastcdn.net/3012E5/tuxcast",
image: "http://s.jwpcdn.com/thumbs/RxiqSWej-640.jpg"
});
jwplayer().onError(function(){
jwplayer().load({file:"http://content.jwplatform.com/videos/7RtXk3vl-52qL9xLP.mp4",image:"http://content.jwplatform.com/thumbs/7RtXk3vl-480.jpg"});
jwplayer().play();
});
jwplayer().onComplete(function(){
window.location = window.location.href;
});
jwplayer().onBuffer(function(){
theTimeout = setTimeout(function(){
jwplayer().load({file:"http://content.jwplatform.com/videos/7RtXk3vl-52qL9xLP.mp4",image:"http://content.jwplatform.com/thumbs/7RtXk3vl-480.jpg"});
jwplayer().play();
},5000);
});
jwplayer().onPlay(function(){
clearTimeout(theTimeout);
});
</script>
</body>
</html>
Related
I'm using Visual studio code for programming and I'm testing my codes with live server. But today I'm stuck with an error.
My code is below.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=,, initial-scale=1.0">
<title>Test lesson</title>
<script src="/JS/jquery-3.6.1.min.js"></script>
<link rel="stylesheet" type="text/css" href="css/main.css"/>
<script>
$(function(){
$("div").find("*").css({
"color":"red",
"border":"2px solid red",
});
});
</script>
</head>
<body class="ancestors">
<div class="descendants" style="width:500px;">div
<p class="first">P (child)
<span>Span (grandchild)</span>
</p>
<p class="second">P (child)
<span>Span (grandchild)</span>
</p>
</div>
</body>
</html>
So, when i run this code with live server, my browser says :
// <![CDATA[ <-- For SVG support if ('WebSocket' in window) { (function () { function refreshCSS() { var sheets = [].slice.call(document.getElementsByTagName("link")); var head = document.getElementsByTagName("head")[0]; for (var i = 0; i < sheets.length; ++i) { var elem = sheets[i]; var parent = elem.parentElement || head; parent.removeChild(elem); var rel = elem.rel; if (elem.href && typeof rel != "string" || rel.length == 0 || rel.toLowerCase() == "stylesheet") { var url = elem.href.replace(/(&|\?)_cacheOverride=\d+/, ''); elem.href = url + (url.indexOf('?') >= 0 ? '&' : '?') + '_cacheOverride=' + (new Date().valueOf()); } parent.appendChild(elem); } } var protocol = window.location.protocol === 'http:' ? 'ws://' : 'wss://'; var address = protocol + window.location.host + window.location.pathname + '/ws'; var socket = new WebSocket(address); socket.onmessage = function (msg) { if (msg.data == 'reload') window.location.reload(); else if (msg.data == 'refreshcss') refreshCSS(); }; if (sessionStorage && !sessionStorage.getItem('IsThisFirstTime_Log_From_LiveServer')) { console.log('Live reload enabled.'); sessionStorage.setItem('IsThisFirstTime_Log_From_LiveServer', true); } })(); } else { console.error('Upgrade your browser. This Browser is NOT supported WebSocket for Live-Reloading.'); } // ]]>
Can anyone help me please for fix that error?
I am looking for a way to call a javascript number in the body of an html page. This does not have to be long and extravagant just simply work, I just want something like:
<html>
<head>
<script type="text/javscript">
var number = 123;
</script>
</head>
<body>
<h1>"the value for number is: " + number</h1>
</body>
</html>
Try This...
<html>
<head>
<script>
function myFunction() {
var number = "123";
document.getElementById("myText").innerHTML = number;
}
</script>
</head>
<body onload="myFunction()">
<h1>"The value for number is: " <span id="myText"></span></h1>
</body>
</html>
Use document.write().
<html>
<head>
<script type="text/javascript">
var number = 123;
</script>
</head>
<body>
<h1>
the value for number is:
<script type="text/javascript">
document.write(number)
</script>
</h1>
</body>
</html>
<html>
<head>
<script type="text/javascript">
var number = 123;
var string = "abcd";
function docWrite(variable) {
document.write(variable);
}
</script>
</head>
<body>
<h1>the value for number is: <script>docWrite(number)</script></h1>
<h2>the text is: <script>docWrite(string)</script> </h2>
</body>
</html>
You can shorten document.write but
can't avoid <script> tag
<script type="text/javascript">
function get_param(param) {
var search = window.location.search.substring(1);
var compareKeyValuePair = function(pair) {
var key_value = pair.split('=');
var decodedKey = decodeURIComponent(key_value[0]);
var decodedValue = decodeURIComponent(key_value[1]);
if(decodedKey == param) return decodedValue;
return null;
};
var comparisonResult = null;
if(search.indexOf('&') > -1) {
var params = search.split('&');
for(var i = 0; i < params.length; i++) {
comparisonResult = compareKeyValuePair(params[i]);
if(comparisonResult !== null) {
break;
}
}
} else {
comparisonResult = compareKeyValuePair(search);
}
return comparisonResult;
}
var parcelNumber = get_param('parcelNumber'); //abc
var registryId = get_param('registryId'); //abc
var registrySectionId = get_param('registrySectionId'); //abc
var apartmentNumber = get_param('apartmentNumber'); //abc
</script>
then in the page i call the values like so:
<td class="tinfodd"> <script type="text/javascript">
document.write(registrySectionId)
</script></td>
Here is another way it can be done .
function showData(m)
{
let x ="<div> added from js ";
let y = m.toString();
let z = "</div>";
let htmlData = x+y+z ;
content.insertAdjacentHTML("beforeend",htmlData);
}
You can do the same on document ready event like below
<script>
$(document).ready(function(){
var number = 112;
$("yourClass/Element/id...").html(number);
// $("yourClass/Element/id...").text(number);
});
</script>
or you can simply do it using document.write(number);.
<?php
$x1='<span id="x1"></span><script>document.getElementById("x1").innerHTML = x1;</script>';
$x2='<span id="x2"></span><script>document.getElementById("x2").innerHTML = x2;</script>';
$x3='<span id="x3"</span><script>document.getElementById("x3").innerHTML = x3;</script>';
?>
<html><body>
<script> var
x1="123",
x2="ABC",
x3=666;
</script>
<?php echo $x1 ?><br>
<?php echo $x2 ?><be>
<?php echo $x3 ?><be>
</body></html>
Index.html:
<html>
<body>
Javascript Version: <b id="version"></b>
<script src="app.js"></script>
</body>
</html>
app.js:
var ver="1.1";
document.getElementById("version").innerHTML = ver;
You cannot add JavaScript variable to HTML code.
For this you need to do in following way.
<html>
<head>
<script type="text/javscript">
var number = 123;
document.addEventListener('DOMContentLoaded', function() {
document.getElementByTagName("h1").innerHTML("the value for number is: " + number);
});
</script>
</head>
<body>
<h1></h1>
</body>
</html>
I want to measure the time in which the user keeps the site on focus, but it doesn't work.
<!doctype html>
<head>
<script>
var timeActive;
function timeActiveFuncStart(){
timeActive = 0;
function timeActiveFunc(){
timeActive++;
setTimeout("timeActiveFunc()", 1000)}}
var timeActiveTotal;
function timeActiveTotalFunc(){
timeActiveTotal = timeActiveTotal + timeActive}
document.getElementById("timeActiveP").innerHTML = timeActive;
document.getElementById("timeActiveTotalP").innerHTML = timeActiveTotal;
</script>
</head>
<body onfocus="timeActiveFuncStart()" onblur="timeActiveTotalFunc()">
<p id="timeActiveP"></p>
<p id="timeActiveTotalP"></p>
</body>
</html>
It is because, JavaScript cannot access the elements. And also, consider using setInterval instead of setTimeout this way:
Please replace the <script> to go to the bottom:
<!doctype html>
<head>
</head>
<body onfocus="timeActiveFuncStart()" onblur="timeActiveTotalFunc()">
<p id="timeActiveP"></p>
<p id="timeActiveTotalP"></p>
<script>
var timeActive;
var timeActiveTotal = 0;
function timeActiveTotalFunc() {
timeActiveTotal = timeActiveTotal + timeActive;
}
function timeActiveFuncStart() {
timeActive = 0;
function timeActiveFunc() {
timeActive++;
document.getElementById("timeActiveP").innerHTML = timeActive;
document.getElementById("timeActiveTotalP").innerHTML = timeActiveTotal;
}
setInterval(timeActiveFunc, 1000);
}
</script>
</body>
</html>
Or, can you put it after window.onload event?
<!doctype html>
<head>
<script>
window.onload = function () {
var timeActive;
function timeActiveFuncStart(){
timeActive = 0;
function timeActiveFunc(){
timeActive++;
}
setInterval("timeActiveFunc()", 1000);
var timeActiveTotal;
function timeActiveTotalFunc(){
timeActiveTotal = timeActiveTotal + timeActive}
document.getElementById("timeActiveP").innerHTML = timeActive;
document.getElementById("timeActiveTotalP").innerHTML = timeActiveTotal;
}
</script>
</head>
<body onfocus="timeActiveFuncStart()" onblur="timeActiveTotalFunc()">
<p id="timeActiveP"></p>
<p id="timeActiveTotalP"></p>
</body>
</html>
Thanks again for the help, but ... here's something that finally works:
<script>
var timeActive = 0;
var timeActiveTotal = 0;
window.onpageshow = function(){
setInterval(function(){
timeActive++;
document.getElementById("timeActiveP").innerHTML = timeActive;
}, 1000);
window.onblur = function(){
timeActiveTotal = timeActiveTotal + timeActive;
document.getElementById("timeActiveTotalP").innerHTML = timeActiveTotal;
}
window.onfocus = function(){
timeActive = 0;
}
}
</script>
I need to know why JavaScript can't talk back to Flex.
I have a project that is going to use JavaScript to play a given video file. Its running on a custom MVC framework where asset files are loaded via the /static prefix.
Example: http://helloworld/static/swf/movie.swf`
I compile my Flex application using the mxmlc binary with options -static-link-runtime-shared-libraries=true, -use-network=true and --debug=true.
Flex
<?xml version="1.0" encoding="utf-8"?>
<s:Application
xmlns:fx="http://ns.adobe.com/mxml/2009"
xmlns:s="library://ns.adobe.com/flex/spark"
xmlns:mx="library://ns.adobe.com/flex/mx"
creationComplete="init()">
<fx:Script>
<![CDATA[
import mx.controls.Alert;
import flash.external.ExternalInterface;
private function init():void {
log("Logging...");
if (ExternalInterface.available) {
ExternalInterface.call("HelloWorld.initFlash");
ExternalInterface.addCallback("playVideo", playVideo);
}
}
public function playVideo():void {
log("Playing video...");
}
public function log(message:String):void {
if (ExternalInterface.available) {
ExternalInterface.call(
"function log(msg){ if (window.console) { console.log(msg); } }",
message);
}
}
]]>
</fx:Script>
<s:Panel id="myPanel" title="Hello World" x="20" y="20">
<s:layout>
<s:HorizontalLayout
paddingLeft="10"
paddingRight="10"
paddingTop="10"
paddingBottom="10"
gap="5" />
</s:layout>
</s:Panel>
</s:Application>
HTML
<!DOCTYPE HTML>
<html lang="en-US">
<head>
<meta charset="UTF-8">
<title>Hello World</title>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.4/jquery.min.js"></script>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/swfobject/2.2/swfobject.js"></script>
<script type="text/javascript">
$(function(){
var swfVersionStr = "10.1.0";
var xiSwfUrlStr = "playerProductInstall.swf";
var flashvars = {};
var params = {};
var attributes = {};
params.allowscriptaccess = "sameDomain";
params.quality = "high";
params.bgcolor = "#FFFFFF";
params.allowfullscreen = "true";
attributes.id = "HelloWorld";
attributes.name = "HelloWorld";
attributes.align = "left";
swfobject.embedSWF(
"HelloWorld.swf",
"flash-content",
"100%", "100%",
swfVersionStr, xiSwfUrlStr, flashvars, params, attributes );
HelloWorld = function(){
return {
initFlash : function() {
console.log("Called from Flex...");
console.log($("#HelloWorld").get(0).playVideo("be6336f9-280a-4b1f-a6bc-78246128259d"));
}
}
}();
});
</script>
<style type="text/css">
#flash-content-container {
width : 400px;
height : 300px;
}
</style>
</head>
<body>
<div id="layout">
<div id="header"><h1>Hello World</h1></div>
<div id="flash-content-container">
<div id="flash-content"></div>
</div>
</div>
</body>
</html>
Output
Logging...
Called from Flex...
I had the same issue, in the link provided by Chris Cashwell it shows the base for the solution.
Flex MXML
<?xml version="1.0" encoding="utf-8"?>
<s:Application
xmlns:fx="http://ns.adobe.com/mxml/2009"
xmlns:s="library://ns.adobe.com/flex/spark"
xmlns:mx="library://ns.adobe.com/flex/mx"
creationComplete="init()">
<fx:Script>
<![CDATA[
import mx.controls.Alert;
import flash.external.ExternalInterface;
private function init():void {
consoleLog("Hello World");
try
{
Security.allowDomain("*"); //I need to add this.
ExternalInterface.marshallExceptions = true;
ExternalInterface.addCallback("sendAlert",sendAlert);
ExternalInterface.call("initCallBack");
} catch (error:Error) {
consoleLog("Error in ExternalInterface");
consoleLog("Error" + error.message);
}
}
public function sendAlert(s:String):void
{
Alert.show(s);
}
public function consoleLog(message:String):void {
if (ExternalInterface.available) {
ExternalInterface.call(
"function log(msg){ if (window.console) { console.log(msg); } }",
message);
}
}
]]>
</fx:Script>
<s:Panel id="panel1" title="Hello World" x="20" y="20">
<s:layout>
<s:HorizontalLayout
paddingLeft="10"
paddingRight="10"
paddingTop="10"
paddingBottom="10"
gap="5" />
</s:layout>
<s:TextArea id="textarea1"
width="300" height="100"
text="Hello World" />
</s:Panel>
</s:Application>
HTML
<!DOCTYPE HTML>
<html lang="en-US">
<head>
<meta charset="UTF-8">
<title>Hello World</title>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.4/jquery.min.js"></script>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/swfobject/2.2/swfobject.js"></script>
<script type="text/javascript">
var flexApp;
function initCallBack() {
flexApp = document.getElementById("HelloWorldFlex");
if (flexApp != undefined) {
try {
flexApp.sendAlert( "Hello World" );
} catch(err) {
console.log("There was an error on the flex callback.");
console.log(err);
}
} else {
console.log("The flex object does not exist yet");
}
return;
}
$(function(){
HelloWorld = function(){
return {
init : function() {
var swfVersionStr = "10.1.0";
var xiSwfUrlStr = "playerProductInstall.swf";
var flashvars = {
bridgeName : "flex",
};
var params = {};
var attributes = {};
params.allowscriptaccess = "always";
params.quality = "high";
params.bgcolor = "#FFFFFF";
params.allowfullscreen = "true";
attributes.id = "HelloWorldFlex";
attributes.name = "HelloWorldFlex";
attributes.align = "left";
swfobject.embedSWF(
"HelloWorld.swf",
"flash-content",
"100%", "100%",
swfVersionStr, xiSwfUrlStr, flashvars, params, attributes );
}
}
}();
HelloWorld.init();
});
</script>
<style type="text/css">
#flash-content-container {
width : 400px;
height : 300px;
}
</style>
</head>
<body>
<div id="layout">
<div id="header"><h1>Hello World</h1></div>
<div id="flash-content-container">
<div id="flash-content"></div>
</div>
</div>
</body>
I tested it on Flex 4.1, please notice that i had to add the bin-debug folder (C:\flexworkspaces\project\bin-debug) to the flash security app ( http://www.macromedia.com/support/documentation/en/flashplayer/help/settings_manager04.htmlconfiguration ) Please notice that this internet URL is in fact an app that modifies the Flex local configuration.
The logs can be displayed in the Firebug console.
Decided to go with FABridge. For others heres a working example.
MXML
<?xml version="1.0" encoding="utf-8"?>
<s:Application
xmlns:fx="http://ns.adobe.com/mxml/2009"
xmlns:s="library://ns.adobe.com/flex/spark"
xmlns:mx="library://ns.adobe.com/flex/mx"
xmlns:bridge="bridge.*"
creationComplete="init()">
<fx:Declarations>
<bridge:FABridge bridgeName="flex" />
</fx:Declarations>
<fx:Script>
<![CDATA[
import mx.controls.Alert;
import flash.external.ExternalInterface;
private function init():void {
consoleLog("Hello World");
}
public function sendAlert(s:String):void
{
Alert.show(s);
}
public function consoleLog(message:String):void {
if (ExternalInterface.available) {
ExternalInterface.call(
"function log(msg){ if (window.console) { console.log(msg); } }",
message);
}
}
]]>
</fx:Script>
<s:Panel id="panel1" title="Hello World" x="20" y="20">
<s:layout>
<s:HorizontalLayout
paddingLeft="10"
paddingRight="10"
paddingTop="10"
paddingBottom="10"
gap="5" />
</s:layout>
<s:TextArea id="textarea1"
width="300" height="100"
text="Hello World" />
</s:Panel>
</s:Application>
HTML
<!DOCTYPE HTML>
<html lang="en-US">
<head>
<meta charset="UTF-8">
<title>Hello World</title>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.4/jquery.min.js"></script>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/swfobject/2.2/swfobject.js"></script>
<script type="text/javascript" src="bridge/FABridge.js"></script>
<script type="text/javascript">
var flexApp;
var initCallback = function() {
flexApp = FABridge.flex.root();
var textarea1 = flexApp.getTextarea1();
textarea1.setText( "Hello World (Updated)" );
flexApp.sendAlert( "Hello World" );
return;
}
$(function(){
HelloWorld = function(){
return {
init : function() {
var swfVersionStr = "10.1.0";
var xiSwfUrlStr = "playerProductInstall.swf";
var flashvars = {
bridgeName : "flex",
};
var params = {};
var attributes = {};
params.allowscriptaccess = "sameDomain";
params.quality = "high";
params.bgcolor = "#FFFFFF";
params.allowfullscreen = "true";
attributes.id = "HelloWorld";
attributes.name = "HelloWorld";
attributes.align = "left";
swfobject.embedSWF(
"HelloWorld.swf",
"flash-content",
"100%", "100%",
swfVersionStr, xiSwfUrlStr, flashvars, params, attributes );
FABridge.addInitializationCallback( "flex", initCallback );
}
}
}();
HelloWorld.init();
});
</script>
<style type="text/css">
#flash-content-container {
width : 400px;
height : 300px;
}
</style>
</head>
<body>
<div id="layout">
<div id="header"><h1>Hello World</h1></div>
<div id="flash-content-container">
<div id="flash-content"></div>
</div>
</div>
</body>
</html>
In the following code, my attempts at creating the preparePlaceholder on the the fly
has failed, and the only error is "parent is not defined" from the error console.
I'm modifying this example for use with a JS object literal and could use the
sage wisdom of StackOverflow.
TIA
imageGallery={
// IDs
placeHolderID:'placeholder',
imageNavListID:'imagegallerylist',
// CSS Classes
init:function(){
if(!document.getElementById || !document.createTextNode){return;}
imageGallery.preparePlaceholder();// Call to preparePlacholder
// Prepare Gallery:
imageGallery.navList = document.getElementById(imageGallery.imageNavListID);
if(!imageGallery.navList){return;}
var links = imageGallery.navList.getElementsByTagName('a');
for(var i = 0; i<links.length;i++){
links[i].onclick = function(){
// Call to showPic function:
return imageGallery.showPic(this) ? false : true;
}
}
},
showPic:function(whichpic){
imageGallery.pHolder=document.getElementById(imageGallery.placeHolderID);
if(!imageGallery.pHolder || imageGallery.pHolder.nodeName != "IMG"){return;}
var source = whichpic.getAttribute("href");
imageGallery.pHolder.setAttribute("src",source);
if(document.getElementById("description")){
// var text = whichpic.getAttribute("title");
var text = whichpic.getAttribute("title") ? whichpic.getAttribute("title") : "";
var description = document.getElementById("description");
if(description.firstChild.nodeType == 3){
description.firstChild.nodeValue = text;
}
}
return true;
},
preparePlaceholder:function(){
var placeholder = document.createElement("img");
placeholder.setAttribute("id", "placeholder");
placeholder.setAttribute("src","images/placeholder.gif");
placeholder.setAttribute("alt","My Image Gallery");
// alert(placeholder);
var description = document.createElement("p");
description.setAttribute("id","description");
var desctext = document.createTextNode("Choose an Image");
description.appendChild(desctext);
var gallery = document.getElementById("imageGallery");
imageGallery.insertAfter(placeholder,imageGallery);
imageGallery.insertAfter(description,imageGallery.placeholder);
// alert("Function Called");
},
// Utility Functions
insertAfter:function(newElement,targetElement){
var parent = targetElement.parentNode;
if(parent.lastChild == targetElement){
parent.appendChild(newElement);
} else {
parent.insertBefore(newElement,targetElement.nextSibling);
}
},
addLoadEvent:function(func){
var oldonload = window.onload;
if(typeof window.onload != 'function'){
window.onload = func;
}else{
window.onload = function(){
oldonload();
func();
}
}
}
}
// End Utility Functions
imageGallery.addLoadEvent(imageGallery.init);
// window.onload=imageGallery.init;
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="uft-8" />
<title>Image Gallery</title>
<link rel="stylesheet" href="styles/layout.css" type="text/css" media="screen" title="layout" charset="utf-8" />
</head>
<body>
<h1>Snapshots</h1>
<ul id="imagegallerylist">
<!--Links Here-->
</ul>
<script src="scripts/imageGallery.js"></script>
</body>
</html>
Have an example here which doesn't produce errors. I have removed your comments and put in comments where I have changed the code.
JavaScript:
var gallery = document.getElementById("imageGallery");
// Changed from imageGallery to gallery
imageGallery.insertAfter(placeholder, gallery);
// Changed from imageGallery.placeholder to placeholder
imageGallery.insertAfter(description, placeholder);
HTML:
<div id="imageGallery"></div> <!-- Added this div -->