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.
Related
I want an audio file to play automatically when a web page loads. I've tried the following simple code but for some reason it's not working. Any thoughts? I understand this may be caused by some default behavior of Google Chrome. Thanks.
<!DOCTYPE html>
<html>
<head>
<title>My Audio</title>
</head>
<body>
<script type="text/javascript">
window.onload=function(){
const audio = new Audio("wonderful.mp3");
audio.play();
}
</script>
</body>
</html>
Simply you can't.
Browsers don't allow you to play audio when the user has not interacted with your site at least once.
You should create a simple function that, when the user click for the first time on your page, play your audio.
Error : Uncaught (in promise) DOMException: play() failed because the user didn't interact with the document first.
This snippet allows you to play your audio when the user click on your document for the first time :
<!DOCTYPE html>
<html>
<head>
<title>My Audio</title>
</head>
<body>
<div>Test</div>
<audio id="my-audio" autoplay
src="https://file-examples.com/storage/fe8bd9dfd063066d39cfd5a/2017/11/file_example_MP3_5MG.mp3"></audio>
<script type="text/javascript">
var isAudioPlayed = false;
function playAudio() {
isAudioPlayed = true;
const myAudio = document.getElementById("my-audio");
myAudio.play();
}
document.body.onclick = ()=>{
if(isAudioPlayed) return ;
playAudio();
}
/*
window.onload = () => {
const myAudio = document.getElementById("my-audio");
console.log(myAudio);
myAudio.addEventListener('canplay', (event) => {
console.log("CnPlay",event)
event.target.play()
})
}
*/
</script>
</body>
</html>
Else you can use canplay event
Hi I am trying to disable a function with a click of a button and then enable it again once another button is clicked I have tried unbind but I am getting no where
any suggestions to how I can go about this?
Code:
Mute
Unmute
$('.MuteOn').on('click tap touch', function() {
//Disable soundListen function
});
$('.MuteOff').on('click tap touch', function() {
//Enable soundListen function
});
//
setInterval(function soundListen() {
if ($("body").hasClass("fp-viewing-1")) {
audio1.play();
} else {
audio1.pause();
audio1.currentTime = 0;
}
if ($("body").hasClass("fp-viewing-2")) {
audio2.play();
} else {
audio2.pause();
audio2.currentTime = 0;
}
if ($("body").hasClass("fp-viewing-3")) {
audio3.play();
} else {
audio3.pause();
audio3.currentTime = 0;
}
}, 100);
Thank you in advance for any suggestions.
Ok, so I understood it like this:
-On first page user can click mute/unmute button and that should be saved during navigation through all other pages/slides.
Then here is a code:
<!doctype>
<html lang="en">
<head>
<meta http-equiv="Content-type" content="text/html; charset=utf-8">
<title></title>
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<!-- jQuery library -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<!-- Latest compiled JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<body>
<button id="mute">Mute</button>
<button id="unmute">Unmute</button>
<button id="reloadPage">Reload Page</button>
<script type="text/javascript">
//get variable from local variables or set to false(you can change it to TRUE if you like to mute on page load) by default
var isMuted = localStorage.getItem("IsMuted")||false;
//mute button onclick method
$(document).on('click','#mute',function(e){
isMuted = true;
//save to local variables
localStorage.setItem("IsMuted", isMuted);
});
//unmute button onclick method
$(document).on('click','#unmute',function(e){
isMuted = false;
//save to local variables
localStorage.setItem("IsMuted", isMuted);
});
//reload page. also you can use F5 or Ctrl+F5
$(document).on('click','#reloadPage',function(e){
location.reload();
});
$(document).ready(function(){
alert("IsMuted = "+isMuted);
//you can encapsulate this into separate function and bind to show-next-slide button
if(isMuted)
{
return;
}
else
{
//get clip id by class name or another suitable method
PlayMyCoolMusic(clipId);
}
});
function PlayMyCoolMusic(clipId)
{
//your audio player logic here
}
</script>
</body>
</html>
With this you can save you mute/unmute status even if page has been reloaded.
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>
I am building a web application where I need to prevent back navigation in the browser history. After searching the threads in StackOverflow I found this:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" >
<title>Untitled Page</title>
<script type = "text/javascript" >
function changeHashOnLoad() {
window.location.href += "#";
setTimeout("changeHashAgain()", "50");
}
function changeHashAgain() {
window.location.href += "1";
}
var storedHash = window.location.hash;
window.setInterval(function () {
if (window.location.hash != storedHash) {
window.location.hash = storedHash;
}
}, 50);
</script>
</head>
<body onload="changeHashOnLoad(); ">
Try to hit the back button!
</body>
</html>
Reference Disable browser's back button
I did not change anything in the JavaScript. However, after using this in my code, I am observing another problem while the page is being visited. The webpage is getting auto-scrolled to the top prohibiting viewing the bottom part of the page alongwith disabling of some other features also.
The interesting part is that the page is not showing this symptom when I manually hit the refresh button. I am not getting what is causing this issue.
See, my basic requirement is to stop users visiting the previous page. If any other alternative is there, that would also be welcome.
Please help me to fix this. Thanks in advance.
I have modified code. Now its works in all modern browsers, IE8 and above
var storedHash = window.location.hash;
function changeHashOnLoad() {
window.location.href += "#";
setTimeout("changeHashAgain()", "50");
}
function changeHashAgain() {
window.location.href += "1";
}
function restoreHash() {
if (window.location.hash != storedHash) {
window.location.hash = storedHash;
}
}
if (window.addEventListener) {
window.addEventListener("hashchange", function () {
restoreHash();
}, false);
}
else if (window.attachEvent) {
window.attachEvent("onhashchange", function () {
restoreHash();
});
}
$(window).load(function () { changeHashOnLoad(); });
You are basically reloading the page every 50 ms through
window.location.href += "#";
window.location.href += "1";
Since the browser reloads when the location.href attribute changes.And you call that method again after that reload.
So the site starts to display at the top again every time.
You might generate the hash within a variable and use that for comparison i guess.
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.