I am trying to embed videos using the Play Framework and JW Player. I can hard code and make it work just fine, but I want to use the model's class to determine the video file (via path) that will be embedded.
Here is the code I have been playing with, but is not working:
<script src="#{'/public/jwplayer/jwplayer.js'}"></script>
<script>
$(document).ready(function(){
var content = ${_post.content};
setVideo(content)
});
</script>
<script type='text/javascript'>
function setVideo( content )
{
jwplayer('mediaspace').setup({
'flashplayer': "#{'/public/jwplayer/player.swf'}",
'file': content,
'controlbar': 'bottom',
'width': '640',
'height': '480'
});
}
</script>
Honestly, this is probably more of pseudo code at this point... But hopefuly it is clear what I am trying to do here:
Retrieve the content of the post (in the case the content will be
the path to the video)
Place that into the function.
Which will set the 'file': content.
Any suggestions on how to tackle this?
Some ideas for tackling the issue:
is the Path visible in the rendered HTML?
is it visible in the generated javascript?
does it need to be escaped correctly? i'd image your var content should be a string?
how does the _post.content get generated? why the underscore? are you doing this from within a play template tag?
is the file accessible via said path, outside of the script?
Hope this helps.
Related
This question already has answers here:
Can you make a javascript function replace itself on the page with custom html?
(4 answers)
Closed 5 years ago.
I need to create a javascript that return a iframe tag.
the customer will paste a script in where the iframe need to be, and then the script should create a iframe.
Must be like this:
<script src="http://www.helloworld.com/script/loadcustomerframe.js" data-customer="14532"></script>
then the script should load a iframe to a url somewhere, and also i need to read the "data-customer".
I am a backend developer c#, not a frontend. I have try several days now, i cant get it to work.
Please help.
Thanks
Something like this should work:
$(document).ready(() => {
$("[data-customer]").each(function() {
let customerId = $(this).data("customer");
$(this).replaceWith(`<p>This is customer #${customerId}.</p>`);
// The following comment is an example of how you could use an iframe
//$(this).replaceWith(`<iframe src="http://example.org/customer/${customerId}>Hello!</iframe>`);
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div data-customer="1"></div>
<div data-customer="2"></div>
<div data-customer="3"></div>
You'll only need to have the script appear once (most likely in your <head>) and it will replace any <div> that has a data-customer attribute. You simply just need to figure out the proper URL for your <iframe>.
Si basically your JS code will do the trick,
First need to create a JS code and host it into some server to get it by fetching it, so image that your JS code is hosted into https://www.mygreatjscode.com/myjscode.js
So your JS code will do the rest,
like this using pure JS (with not frameworks like jQuery etc), so your myjscode.js file will contain this:
//create an autoexec function
(function(){
var body = document.getElementByTagName("body");
body = body ? body : false;
if (body){
var iframe = document.createElement("iframe");
iframe.setAttribute("id", "MY_CUSTOM_ID");
//here set the url that the iframe will be render
iframe.setAttribute("src", "https://stackoverflow.com/");
//finally insert into the body of page
body.appendChild(iframe);
}
})();
Finally you need to insert the Script Tag into your page like this
<script src="https://www.mygreatjscode.com/myjscode.js" data-customer="14532"></script>
How do I take the code from codepen, and use it locally in my text-editor?
http://codepen.io/mfields/pen/BhILt
I am trying to have a play with this creation locally, but when I open it in chrome, I get a blank white page with nothing going on.
<!DOCTYPE HTML>
<html>
<head>
<script> src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
<script type="text/javascript" src="celtic.js"></script>
<link rel="stylesheet" type="text/css" src="celtic.css"></link>
</head>
<body>
<canvas id="animation" width="400" height="400"></canvas>
</body>
</html>
I have copy, pasted and saved the css and js into different files and saved them, then tried to link them into the html file as I have shown above.
I have also included the jquery library as I understand a lot of the codepen creations use it.
The only console error I'm getting is
Uncaught TypeError: Cannot read property 'getContext' of null
which is linking to my js file, line 4
(function(){
var canvas = document.getElementById( 'animation' ),
c = canvas.getContext( '2d' ),
Sorry if this is dumb, but I'm new to all this.
I'm sure this is basic as hell. Any help would be awesome!
Joe Fitter is right, but I think is better to export your pen (use the export to export.zip option for using your pen locally). This will give you a working version of your pen without having to copy and paste the CSS, JavaScript and HTML code and without having to make changes on it for making it work.
Right click on the result frame and choose View Frame source. And you can copy the source code and paste it in your own text-editor.
It seems your javascript is running before the HTML has finished loading. If you can use jQuery put the js inside of this;
$( document ).ready(function() {
// js goes in here.
});
either u can try this....
function init() {
// Run your javascript code here
}
document.addEventListener("DOMContentLoaded", init, false);
looks like you are calling the JS before the DOM is loaded.
try wrapping it in a
$(function() {
// your code here
});
which is the same as
$(document).ready(function() {
// your code here
});
if you are using jQuery.
or you could include the <script> tag after the content, just before the closing body tag, this will ensure the content has been rendered before the JS is executed
Or you could name the function in your JS and execute it onLoad of the body:
<body onLoad="yourFunction();">
To download the computed html of a codepen, go to the codepen of your choice,
then click the "Change View" button and go to the "full page" mode.
Now depends on your browser.
Firefox
display the source code (Cmd+u) and go at the very bottom.
Look for the last iframe and click on the value of the src attribute.
There you go.
Chrome
Right click in the page (not the codepen header) and choose the View FRAME source (not the view PAGE source) option.
There you go.
I am working on a web widget that can be embedded on 3rd party websites.
Since a lot of content management systems do not allow users to post/execute scripts, I want my widget to show an image instead of JS-generated content if such situation occurs.
<script type="text/javascript">
(function(){var s = document.createElement('script');s.src = '//example.com/file.js';s.async = "async";document.body.appendChild(s);}());
</script>
<img src="//example.com/image.svg?param1=value1" src="" id="my_fallback">
For now I am using the code above. Is there any way to show the image only if the script did not load? The goal is to reduce transfer usage and provide better user experience.
The first line of my widget script is removing #my_fallback, but it is not fast enough - sometimes I can see the image for a second before the actual widget content replaces it.
The only thing I came up with is to delay creation of the image by including something like sleep() in the beginning of my image generator.
EDIT
No, <noscript> won't work here. I do not want to fallback if user has disabled javascript. I want to fallback when a script has not loaded - for any reason, especially if some security mechanism cut off the <script> section.
Use html tag Noscript
<noscript>Your browser does not support JavaScript! or a image here</noscript>
Remember
In HTML 4.01, the tag can only be used inside the element.
In HTML5, the tag can be used both inside and .
Edit : -
add one html tag
<span class="noscript">script is loading.....or put image</span>
inside your script tag
now in your scripts which has to be load add one code like
add this line at the end
$('.noscript').hide();
This is the other way which you can handle the same!
One quick fix is to create a global variable from that script, visible to the window object.Also the image must be hidden. Then, on a main.js script check for that variable. If it exists then run your widget code from there. If it doesnt exist then fadeIn the fallback image.
Heres a demo
The default img is an image 272x178 size and the widget image is an image 300x400 size.
To simulate the action when the script is unavailable, just name the variable myWidgetIsEnabled with a different name so the condition fails.
Here is some code:
// Code goes here
var widget = (function(){
window.myWidgetIsEnabled = true;
return {
init: function(){
var s = document.createElement('script');s.src = 'file.js';s.async = "async";
document.body.appendChild(s);}
}
}());
$(document).ready(function(){
if(window.myWidgetIsEnabled){
widget.init();
}else{
console.log('not enabled, the default behavior');
$('.fallback').fadeIn();
}
})
This might be a long shot but I was wondering if anyone knew if there was a way to detect (with Javascript or JQuery) if an iframes source has changed - ie: if a user changes the page within an iframe.
I want to write something like:
if (iframesource == http://www.site.com/urlA){
do something
}
else if (iframesource == http://www.site.com/urlB){
do something different
}
I already know the src attribute for the iframe element (<iframe src="http://www.site.com">) does not change if the page changes within the site so using JQuery to detect the attribute is out.
would anyone know if this is possible? Any advice would be greatly appreciated! Thanks
OK basically after loads of research I have found out that this only works if the iframe is pointing to a URL within your existing site or server. If you are pointing to another site (say YouTube) it will not work.
The best way to transfer information from one site to another is still with JSON.
You will need to build a javascript function that does a few things:
onload.
obtains src value by element id.
passes this into temp_object
enter recursive function with a set_timeout(100ms) say.
compare temp_object to object.
if true, do something, temp_object = object.
#EDIT -----> anti-sop anti-xss
<html>
<head>
<script type="text/javascript">
function GetIFrameUrl()
{
alert('url = ' + document.frames['frame1'].location.href);
}
</script>
</head>
<body>
Find the iFrame URL
<iframe name="frame1" src="http://www.google.com" width="100%" height="400"></iframe>
</body>
</html>
Getting the current src of an Iframe using JQuery
I want to synchronize web site like when page load first it will load content then images then flash content then another content.
Like i have seen the same at http://gmailblog.blogspot.com/ [ see how images load ]
Is there any way to achieve? Any link or source code would be appreciated.
I seen the web site. This is the same thing that happens with bing. How to do this ?
In the core HTML code give the <img src="loading.gif" id="1"/> or whatever element you want.
When the Core HTML is done, before the </body> tag, use javascript to change the
attributes values (for eg. "src" attribute of the img element). Remeber the javascript need to be written at the end of the HTML before closing the body tag. The browser will load the
contents accordingly in sequence. This can be used to achieve priority based loading of HTML components.
You can synchronize loading of all elements on your page by controlling it using JS. For ex: one strategy to load images after content would be:
a) In your html, instead of in the src attribute, specify the image location in another attribute, say 'isrc'.
b) Inside your onload callback (assumes you're using jQuery):
var loadCounter = 0;
$('img').each(function() {
if($(this).attr('isrc')) {
this.onload = function() {
loadCounter++;
if($('img[isrc]').length == loadCounter) {
// .. proceed to loading other stuff like flash etc..
}
}
$(this).attr('src', $(this).attr('isrc')); // load the image
}
});