Creating a simple youtube video player using javascript - javascript

I'm trying to create a simple youtube player using some javascript. Example is here:
http://jsfiddle.net/YX8pQ/6/
I've got the basic functionality working (kinda) using click functions to toggle the visibility of each iframe.
HOWEVER:
When clicking each thumbnail in succession, loading the iframes becomes a bit buggy; sometimes the video you click doesn't load, and sometimes (no idea why!) a different video loads.
When clicking a different thumbnail, currently-playing videos keep on loading.
Is there a more elegant/robust way of doing this? It's a pretty simple function but I can't seem to work out a better way to make this work.

You need to hide the previous video frame before toggling the new one. See updated example : http://jsfiddle.net/ampersand/YX8pQ/8/
I've created a vidframe class on each iframe. This is used in the css as well as in the jQuery selector.

I know you want to solve the problems you have with your video player, but in case you rethink it, you could use flowplayer, it's awesome, and has streaming also :)

Related

Python Selenium - how to click full screen button of a video without a frame

I am working with selenium for the first time, and I'm trying to play a video on another website.
I've already managed to play the video, but now I'm stuck trying to make it full-screen. The full-screen button is hidden unless I hover with my mouse over it.
So I searched for a solution and everybody suggests to use switch_to.frame() and then access the button, but it seems like no frame surrounds the video in my case. I'm not an expert in HTML so maybe I am getting this wrong, but is there a way to click that full-screen button when there's no frame surrounding the video?
Thanks in advance for any help :)
If there isn't an iframe containing the video, you should be able to click the button like you would any other on the screen. To get the hover menu to appear you can use ActionChains(driver).move_to_element(element).perform().
If you're having issues finding the button, you may also be able to video_player.send_keys("f"). Many players will use that shortcut to switch to fullscreen.

Video to full modal

I am inserting YouTube videos in my website with iframes and I need to make the video almost full screen and the background white (like a full screen mode). I know how to make both, but I cant move the video with javascript from his container to a new one without stoping so how can i do it?
Thanks for your time
This works if you're using Bootstrap. I think you should be able to use it if you arent using Bootstrap too.
YTModal helps you play Youtube videos in a popup window based jQuery and Twitter Bootstrap modal component. It also requires jQuery YouTubeDefaultImageLoader.js to insert Youtube video iframes with post images into your web page
http://www.jqueryscript.net/other/Youtube-Video-Modal-with-jQuery-Bootstrap-3-YTModal.html

Play music across pages? [duplicate]

I am making a website for my friends band. I would like to know if its possible (apart from using Ajax) to keep audio playing after clicking on a link to another page on the site?
I currently have it set up using Ajax to reload the content, but I am having a few issues with it, and I'd rather not deal with the bother unless I really have to.
If not possible, is there a way to minimise the disruption (pausing then playing again) while navigating? It would be possible for the new page to continue playing the track from where the last page stopped, but I would like to minimise the pause. Or, on this subject, is it possible to keep certain page elements loaded after changing the URL (without using # urls), like facebook does (as in, you click on it, but the banner never disappears during loading)
Thanks for any help :)
Use Ajax to load content and History API’s pushState() to alter URL without page reload.
For consistent behavior across browsers, consider using a wrapper library like History.js.
Sites like Facebook use JavaScript/AJAX for these kind of things. If you don't want to use it, you can use frames (not recommended). Divide the page in two frames: the player and the website itself. This way you can easily turn it off too, just open the site without frames.
Good luck!
Of course you could also pop up the player in another window/tab.
(For now) It won't be possible without frames or javascript.
It might be troublesome to implement it differently than via AJAX, however you can either use IFrames, where the music would be played in the main one and the content is displayed in the child on or you can always make it a Flash webpage.
Build it in Wordpress and use the AnythingSlider plugin to have the pages shift within the main page. This way you can have tabbed navigation and never leave the actual page. No need to write too much code. The AnythingSlider uses html for the slides.
You can also not use wordpress and just use the AnythingSlider code.
http://css-tricks.com/anythingslider-jquery-plugin/
and
http://wordpress.org/extend/plugins/anythingslider-for-wordpress/
and
http://css-tricks.com/examples/AnythingSlider/

Embedding PDF with flipping pages

I've seen a lot of questions and answers here that help you too embed PDF documents, but they are all "vertical read", where you scroll down to see other pages.
Is there any plugin, or maybe even a simple script that would help you to embed and read the PDF document horizontaly? Like where you see two pages and click next on top to see the next two.
Just like a book. (No fancy animations though)
Thanks.
There are plugins that lets you read pdf documents. But they might be fancy.
http://www.jqueryrain.com/2012/09/best-jquery-pdf-viewer-plugin-examples/
or
http://fliphtml5.com/free-pdf-to-jquery-flipbook.php
I like the last one especially
You can set the initial view of a PDF to show two pages.
If you add Fullscreen view to that, and the user has not deactivated clicking to the next page, it actually should give the effect you want (not verified).
If the Fullscreen view does not work, your user would use the cursorLeft and cursorRight buttons to navigate.

Is there a way to use jQuery to simulate a user clicking on this div, to start playing the video contained within?

jsFiddle
I have a DailyMotion video embedded in my page, through an iFrame, within a div. If the user clicks on the video, it starts playing.
Is there a way to use jQuery to simulate the user clicking on the video, so that it will start playing automatically? From what I've read so far you can only use jQuery's click() with events attached with jQuery, which wouldn't work here. Can this be done? Thanks for reading.
EDIT:
Forgot to mention, I know you can add ?autoPlay=1 to the DailyMotion embed url, but I need to do this for several online video sites, some of which don't support autoplay, so I need to figure out if there's another way to do it.
In this case there's no need for jQuery at all, you can just add ?autoPlay=1 to the URL, here's your fiddle updated with the change.
No, you can't fake interaction with a document in an iframe from another domain, jQuery or otherwise. It would be a pretty serious security hole if you could frame a third-party site (eg that the user happened to be logged into) and started operating it on their behalf.

Categories

Resources