I have following script in the <body>:
<script>
(function($) {
var buttonShowed = false;
var vPlayer = new Vimeo.Player($('#video0 iframe'));
vPlayer.on('timeupdate', function(time) {
if ((time.seconds >=580) && (!buttonShowed) ) {
buttonShowed = true;
$('#delayed-button') .css('visibility','visible');
}
});
})(jQuery);
</script>
In the <head>:
<script src="https://player.vimeo.com/api/player.js"></script>
The Vimeo Video got the ID video0 and the button got the ID delayed-button.
On my phone the button shows on 580 seconds but with different browsers (Chrome, Opera, Safari) on my PC the button does not show up.
I really don't why, can you help me?
Try using a div element instead of an iframe and it should work. It seems that timeupdate is not working with iframe.
I've made you a working fiddle here. The full code:
var buttonShowed = false;
var vPlayer = new Vimeo.Player($('#video0 #player'));
vPlayer.on('timeupdate', function(time) {
console.log(time.seconds);
if ((time.seconds >= 570) && (!buttonShowed)) {
buttonShowed = true;
$('#delayed-button').css('visibility', 'visible');
}
});
#delayed-button{
visibility: hidden;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src='https://player.vimeo.com/api/player.js'></script>
<div id='video0'>
<div data-vimeo-id="76979871" data-vimeo-autoplay="true" id="player"></div>
</div>
<div id='delayed-button'>
button
</div>
Related
I cant seem to understand what I am doing wrong with this I am trying to add in a check box that will target the Iframe created by my predecessor but being a novice to JavaScript I have thus far used snippets of code from various sources to come up with this Frankenstein. I have started courses on java but I'm long off making these codes myself for now.
<b>STATUS TAG</b>
▲
▼
<!--Space--> ||
<!--Refresh page Box-->
<b>Auto Refresh 2Min</b>
<input type="checkbox" name="toggle" value="1" autocomplete="off">
<script>
if (iframeElement.contentWindow.location.hash == "custFrame") {
$("[name=toggle]").prop("checked", true);
pageRefresh = setTimeout(function() {
iframeElement.contentWindow.location.reload();
}, 120000);
}
$("[name=toggle]").click(function() {
if (!$('[name=toggle]').prop('checked')) {
(iframeElement.contentWindow.location.hash = ""
clearTimeout(pageRefresh);
} else {
(iframeElement.contentWindow.location.hash= "custFrame";
pageRefresh = setTimeout(function() {
iframeElement.contentWindow.location.reload()
}, 5000);
}
})
</script>
<!--Space--> ||</p>
<iframe id="custFrame" name="custFrame" src="google.com" marginheight="0" onload="javascript:autoResize(this);" frameborder="0" width="100%" height="80%"></iframe>
<script>
var socket = new easyXDM.Socket({ onReady:
function() { socket.postMessage(document.body.scrollHeight)
}
});
</script>
Inner URLs changed to google for testing
I should mention that I have various Quickbase API commands with the buttons on the top so it must target the frame and cannot revert back to the default url.
This code is completely working for me:
<script type="text/javascript">
// this will run when the document is fully loaded
function init() {
var input = document.querySelector('input[type=checkbox]');
input.onchange=check
function check(){
var start=setTimeout('reload()',3000)
StartStop=input.checked ? start : clearInterval(start)}
}
// this reloads the iframe, and triggers the next reload interval
function reload() {
var iframe = document.getElementById('reloader');
if (!iframe) return false;
iframe.src = iframe.src;
}
// load the init() function when the page is fully loaded
window.onload = init;
</script>
</head>
<body>
<input type="checkbox" id="JustChecked" >checked to get latest<br>
<iframe id="reloader" width="200" height="100" src="test1_frame.html"/>
For some reason, this page won't go to the mobile or desktop page when I use it! Here is the code:
<html>
<head>
<title>Loading...</title>
</head>
<script>
window.onload = function() {
var iOS = ( navigator.userAgent.match(/iPad|iPhone|iPod/g) ? true : false );
if (iOS == true) {
window.location.href="http://m.lifewithzooza.x10host.com/";
} else {
window.location.href="http://lifewithzooza.x10host.com/wordpress/";
}
</script>
<body bgcolor="#FFFFFF">
Loading...
</body>
</html>
Sorry, this is my first time on Stack Overflow, so I'm not familiar with some stuff. Thanks.
You are missing the closing } for onload function. Update code to following.
window.onload = function() {
var iOS = ( navigator.userAgent.match(/iPad|iPhone|iPod/g) ? true : false );
if (iOS == true) {
window.location.href="http://m.lifewithzooza.x10host.com/";
} else {
window.location.href="http://lifewithzooza.x10host.com/wordpress/";
}
}
You have missing } . so its not working. You have missed } for the window.onload = function() { //your code goes here }
Please check running code here
window.onload = function() {
var iOS = ( navigator.userAgent.match(/iPad|iPhone|iPod/g) ? true : false );
if (iOS == true) {
window.location.href="http://m.lifewithzooza.x10host.com/";
} else {
window.location.href="http://lifewithzooza.x10host.com/wordpress/";
}
}
<html>
<head>
<title>Loading...</title>
</head>
<body bgcolor="#FFFFFF">
Loading...
</body>
</html>
2 problems:
You've put your script element in the wrong place, in the middle of nowhere. The script tag must be under body or head and nothing else. As said at W3: The SCRIPT element places a script within a document. This element may appear any number of times in the HEAD or BODY of an HTML document.
You also missed a } on your onload function:
<html>
<head>
<title>Loading...</title>
<script>
window.onload = function() {
var iOS = ( navigator.userAgent.match(/iPad|iPhone|iPod/g) ? true : false );
if (iOS) {
window.location.href="http://m.lifewithzooza.x10host.com/";
} else {
window.location.href="http://lifewithzooza.x10host.com/wordpress/";
}
}
</script>
</head>
<body bgcolor="#FFFFFF">
Loading...
</body>
</html>
I'm using YTPlayer in my iOS app. Everything's fine until the fullscreen button on the toolbar of the YTPlayer got disappeared, now I don't see the fullscreen button,
instead I have a video quality button, playlist button and play on youtube button which are not much useful for me, also which weren't there before. So how to get a fullscreen button on the toolbar and if possible how to remove unwanted buttons. Should I have to change anything in the html file?
<!DOCTYPE html>
<html>
<head>
<style>
body { margin: 0; width:100%%; height:100%%; }
html { width:100%%; height:100%%; }
</style>
</head>
<body>
<div id="player"></div>
<script src="https://www.youtube.com/iframe_api"></script>
<script>
var player;
YT.ready(function() {
player = new YT.Player('player', %#);
window.location.href = 'ytplayer://onYouTubeIframeAPIReady';
});
function onReady(event) {
window.location.href = 'ytplayer://onReady?data=' + event.data;
}
function onStateChange(event) {
window.location.href = 'ytplayer://onStateChange?data=' + event.data;
}
function onPlaybackQualityChange(event) {
window.location.href = 'ytplayer://onPlaybackQualityChange?data=' + event.data;
}
function onPlayerError(event) {
window.location.href = 'ytplayer://onError?data=' + event.data;
}
</script>
</body>
</html>
Thanks in advance.
Never mind. The fullscreen button is visible now. Have no idea why it disappeared and why it got back, think youtube modified it or something.
I write these code and make it work in IE&chrome&firefox,It works well in chrome and firefox but wrong in IE. somebody tells me why,thanks!
these codes makes a animation when I push start button, I hope it stop when I push stop button,but when I push stop, the alert shows so much times.
ok,this is my code. becareful about your browser, maybe it will crash when the animation is playing.
forgive me about my poor english
<html style = "overflow:hidden">
<script src="jquery-1.7.2.js"></script>
<script>
var DIV ;
var CONTENT ;
var move = false;
$(function(){
DIV = $('<img src="7.png"></img>');
CONTENT = $('#content');
});
function startAnimation(){
$('#content').empty();
var div = $('<img src="7.png"></img>');
div.appendTo('#content');
var w_w=$(document).width();
var d_w=div.width();
var l=w_w/2 - d_w/2;
div.css("position","absolute");
div.css("top",$(document).height()+div.height());
div.css("left",l);
if(!move){
div.animate({top:-div.height(),left:l},1000,function(){
alert('ok');
return;
});
}else{
div.animate({top:-div.height(),left:l},1000,function(){
//setTimeout(function(){
startAnimation.call(window);
return;
});
}
}
function start(){
if(!move){
move = true;
startAnimation();
}
}
function stop(){
move = false;
}
</script>
<body style = "overflow:hidden">
<button onclick="start();">start</button>
<button onclick="stop();">stop</button>
<div id='content' sytle="width:1000px;height:700px;overflow:hidden">
</div>
</body>
</html>
Some Internet Explorer versions does ignore css values; without px at the end of it.
top:200 returns error but top:200px works fine on ie.
Try this:
if(!move){
div.animate({'top':-div.height()+'px','left':l + 'px'},1000,function(){//here
alert('ok');
return;
});
}else{
div.animate({'top':-div.height()+'px','left':l + 'px'},1000,function(){//+'px'
startAnimation.call(window);
return;
});
}
I am working on a project that requires a sound to play when a link is clicked. Everything works fine, I used the Javascript below. The problem is that it takes about 30 seconds (depending on internet speed) before you actually hear the file because the browser has to download it. Is there a way to adapt the code below to display an indicator that the file is loading?
<bgsound id="sound">
<script>
function PlaySound(url) {
document.all.sound.src = url;
}
</script>
and this on as the link:
Play
A forewarning that "bgsound" is proprietary to Internet Explorer, as far as I know. Having said that, you can subscribe to its "readystatechage" event to find out when it's done loading.... (untested! as I don't have IE)
<div id="soundLoading" style="display: none;"><img src="someani.gif" /></div>
<bgsound id="sound">
<script>
function PlaySound(url) {
// Setup some loading animation here......
document.all.soundLoading.style.display = "inline";
// Add event listener and set the sound source
sound.onreadystatechange = CheckSoundLoaded;
document.all.sound.src = url;
}
function CheckSoundLoaded() {
if(document.all.sound.readyState == 4) {
// sound is loaded, remove loading animation
document.all.soundLoading.style.display = "none";
}
}
</script>
http://www.highdots.com/forums/javascript/finding-when-bgsound-downloads-47830.html
Simple
The simplest method is to replace the 'Play' text for the link with 'Loading...':
<script type="text/javascript">
//<![CDATA[
function PlaySound(url, anchor) {
anchor.innerHTML = 'Loading...';
document.all.sound.src = url;
}
//]]>
</script>
Play
Here is a demo JS Fiddle.
More Advanced
Another option is to replace the anchor's text with an animated gif:
<script type="text/javascript">
//<![CDATA[
function PlaySound(url, anchor) {
anchor.innerHTML = '<img src="http://www.fordesigner.com/pic/zip/200916124527437778027.gif"/> Loading...';
document.all.sound.src = url;
}
//]]>
</script>
Play
Here is an example JS Fiddle.