YouTube controls/logo and loop - javascript

I know that i'm asking 2 questions but I'm looking for a simple solution for apparently a simple thing.
I want a video from youtube to loop and to show no controls/title/logo.
This is what i found so far.
For the loop : youtube recommends setting loop=1 and playlist=video_id. It works and it doesn't in the same time. Why, because the video is reloading over and over again, a loading screen appears every time the video is loaded, it takes so much bandwidth.
I found a website endlessvideo.com , it works so smooth but i don't know how they do it.
And for the controls and logo, i want them hidden. If i'm using modestbranding=1 and controls=0, a title appears.
If i'm adding showinf=0, the logo appears on mouseover the video.
Is there a way to override this?
Thank you.

Add below options to your link
src="//www.youtube.com/embed/VIDEO_ID?
iv_load_policy=3&
loop=1&
playlist=VIDEO_ID&
controls=0"
iv_load_policy setting the parameter's value to 1 causes video annotations to be shown by default, whereas setting to 3 causes video annotations to not be shown. The default value is 1.
loop setting the parameter's value to 1 will create a loop, default (stop at the end) value is 0.
controls this parameter indicates whether the video player controls are displayed. For IFrame embeds that load a Flash player, it also defines when the controls display in the player as well as when the player will load. Set its value to 0 to not display controls in the player. For IFrame embeds, the Flash player loads immediately.
Source

Related

Oracle APEX preload audio files

I have an Oracle Apex application running on a Android device, which some specific sounds need to be played on multiples pages when a button is clicked, e.g. A notification..
The way I did it is, create the audio object on the header of the page,
var audio = new Audio('/path/Alert.mp3');
And trigger the play event when a button is clicked,
$('#btn_alert').click(function(){
audio.play();
})
This doesn't work as expected for 2 reasons,
When the button gets clicked for the first time, there always a delay before the sound gets played, seems like the page is loading the file or somehow. And from the second time onwards, the sound gets played immediately (looks like its been cached). How do I preload the audio file on a mobile device?
Is there anyway to define the audio object in global scope, so I don't have to repeat the same code on every page?
Thanks a lot
If you add and item to a Global Page - a specific type of page - it will be available on all pages in the APEX application. More here, and in the docs.
WRT to the audio, this may help. Also you might try a dynamic action on page load to load the file.

changing vimeo embed's iframe src adds to history API

I have a vimeo embed on my page. I'd like to change it to a different video when the user clicks a button. I do this by changing the "src" attribute in the iframe (example here):
$('.vimeoIFrame').attr('src','//player.vimeo.com/video/56534375');
});
but weirdly, some new value gets pushed to the browser's history. How can I avoid this side-effect?
I got exactly the same problem around a year after yourself. Some code in embed player is pushing new values to the history as you update the src attribute and there's no workaround using the official api. This messes up my project which relies on the history.js for navigation.
SOLUTION: Just remove and create a new iframe element when you need to change your video. Vimeo player resets and do not need to push values to reach the previous videos.

Is it possible to change Youtube Player parameters dynamically?

I am fiddling with Youtube API for my project, with the iFrame API in particular. And what I want to do is to show the player controls only when it is playing, not when it is stopeed or paused. I've searched through all the API for this feature, but it seems it is possible to change the player's appearance only by destroying at and creating a new one.
So, the question is, is it true? Or can I still change the player somehow?
Thank you!
I am 99% sure that you can only do this by "destroying" it and starting again. As you said there is no mention of it in the docs and the Parameters are sent on load, so you would have to resend them somehow, and not allow the reply back to change the video.
The only thing I suggest, is could you using the API trace what time in the video the change occurs, then reload the page with the new params and start the video where you left off?

HTML5, Video and Javascript: using video timeline to control page behavior

I'm having the following problem: i have to show a video inside a page, but it needs to alternate with page content. Everytime the video stops playing, i have to show a div or something. After a few seconds, that div goes away and the video starts playing again. Alternating between normal content and video.
Is this possible with HTML5 and JS? Any ideas on how to do it?
Consider implementing Popcorn.js. It's part of Mozilla's Popcorn project.
The demo on the front page shows a div with changing HTML content depending on the time code of the video.
Popcorn.js is an HTML5 media framework written in JavaScript for filmmakers, web developers, and anyone who wants to create time-based interactive media on the web
Bind an event when the video stops (addEventListener( "ended", function(){ ... }, false)) to show the div, start a timer after which the div hides and video starts playing again.

Issue with JavaScript, Replacing an iframe's src, and the back button

I am working on a pop out for videos on a website I am doing some development work for. The idea is to click on a thumbnail of the video and then the video pop's off the page. Like how facebook works with their image viewer. I currently have a div tag with it's CSS display attribute set to hidden and an iframe with no src. When a user clicks on the thumbnail for the video I have JavaScript load the appropriate youtube embed link into iframe by this method:
document.getElementById('iframe-id').src = "http://www.youtube.com/embed/(videoID)";
The video is set to automatically start playing. When a user exits the popped off content the src of the iframe is then set to "" by the same method. It works fine, and the video is no longer in the iframe. The issue is with the back button.
Here is my process leading to my problem:
I click on the thumbnail and the
video pops off and starts playing.
I close the popped off content.
I press the back button.
The video I popped off previously is playing in the background. (The Problem)
Here is what I know of the process that is happening:
The page that is being viewed has two
instances created back to back in the
history of a browser. (ie I press the
back button and I am on the same page
still.. this is also when the video
starts playing in particular
browsers)
When I leave the popped off content
open and press the back button I see
just an empty iframe.
I believe my issue lies in the fact that I am changing the src to the iframe. The process of that seems to be causing the browser to load the page again and create a second instance of the same page in the history (where reloading a page does not). When the back button is pressed the page goes to the previous instance, but depending on the browser the hidden iframe is not always empty and the video is playing.
My question(s):
Can this issue be resolved with
JavaScript?
If it can't what could accomplish the task I am trying with out the issue creating two seperate instances of the same page? I was thinking AJAX might be the solution, but I don't know. I am still a little new to this all.
This can be resolved within javascript.
Additionally, AJAX has nothing to do with the problem you're having. AJAX is a mechanism for moving data around, not manipulating HTML documents.
If you just need to display a video, you don't need to use an iframe to do so. I'd suggest keeping a hidden div somewhere on the page and use that as a container for your video pop-up. When you need to display a video, insert whatever HTML you need to get it working into the div and display it when it's ready.

Categories

Resources