Is there a way to have embed youtube video and trigger to jump to manually positions programatically?
The user who is submitting a link to our video-gallery can also input some highlights (like 0:13, 5:25, 8:41) and it would be cool, if other users just click on the time-point and the video would jump to there.
format:
(youtubeURL)#t=(no. of mins.)m(no. of secs.)s
example:
#t=2m35s will move to 2:36 of the video.
When embedding, just use the format.
example:
Go to the solution
Related
I am making an interactive video series in which the viewer can click the annotations to view another video of mine. I have the embedded player on my website, but when I click the annotation linking to another video, it opens a new tab where the video will play on YouTube. How can I make it so that the viewer watches the new video in the same embedded player, without leaving the site?
This is off the top of my head, so not 100% sure, but wourth a try.
First off, you wil need to use the api embedded player. Then you can target it.
You will then need to script the links to target it. Thinking about it, it might not work as the player is "hosted" off your page.
A different way that might be better and should work, is to do a "GET" request on your page and reload your page using the ID to load the required video.
EG.. http: //www.yoursite.com/player.php?videoID=VideoID as link.
I use this in my site for some things, but never tried it with annotations, but should work.
I am trying to add custom controls to an embeded YouTube player. I am overlaying a html menu. However, when a user clicks on the full screen button within YouTube my html menu will no longer be available on the larger player.
There are two possible solutions I foresee.
First, if I could figure out the element that is generated for the fullscreen player then I could overlay controls on this.
Second, if I could grab the fullscreen click event I could use javascript to get the current available window demenisions an scale the video to the available realestate.
I found this: https://developer.mozilla.org/en-US/docs/DOM/Using_fullscreen_mode?redirectlocale=en-US&redirectslug=DOM%2FUsing_full-screen_mode
However, I am not sure if it would work in most browsers and second it looks like it is in the test phase.
The answers I am looking for are:
What is the element or how can I find the element that is generated for the fullscreen player?
Or
How can I capture the click event for fullscreen?
Do you want to capture the click anywhere on the screen or on a link in a menu?
If you want to capture the click on a link on a menu I think this plugin can be useful as an example:
http://www.seanmccambridge.com/tubular/
https://code.google.com/p/jquery-tubular/source/browse/trunk/js/jquery.tubular.1.0.js
I've just started making an iPad app using Phonegap.
On one of my pages I access the camera, take a picture, display that picture on the page and then have a number of customisable options (resizing, positioning of other elements that can be dragged on top of the image etc)
Once you click on a different link (tab bar item) however, all of this information is lost and you have to start over once you go back to the photo page. Is there a way to capture the web page in it's current state, or even grab each elements information (position on page, last photo taken etc) individually so that when the user goes back to the next screen, everything loads as it were when the user left the screen.
Hope this makes sense and someone can help! Thanks in advance!
I'm just a beginner Phonegap developer myself, but I believe you probably want to look into localStorage. http://docs.phonegap.com/en/1.2.0/phonegap_storage_storage.md.html#localStorage
You'll need to use JavaScript (and perhaps a library like jQuery) to get various data about the page's current state. Once you know them, you should be able to to store them for retrieval in subsequent sessions later via localStorage.
I hope this helps.
I’m writing an HTML5 page with a embedded video tag for the iPad.
How can I hide or disable the fullscreen button? I just need to show the video without the fullscreen option.
As far as I know (I could be wrong, this isn’t really my area), you can’t tell Safari how to render its standard video controls.
However, you can tell it not to render its standard video controls (at least according to the HTML5 spec) by omitting the controls attribute from the video tag.
You can then write your own play/pause controls. (See e.g. http://diveintohtml5.ep.io/video.html#markup). That’s obviously a bit more work, but I think it’s your only option.
If you don’t want to write your own controls from scratch, there are a couple of good pre-built ones out there, specifically:
Video JS
Video for Everybody
They’re more focused on providing video via HTML5 or Flash depending on browser capabilities, but you might be able to extract the control parts, or at least see how they’re doing it.
I'm embedding windows media player in a windows sidebar gadget.
As soon as I start the player (even if i stop it after doing so), hitting WIN+D ("Show Desktop") hides my gadget (all other gadgets stay visible).
What's causing this issue and is there a way to fix this annoying behaviour?
The problem occurs both with a media player embedded in the HTML and with one created with new ActiveXObject(...).
As I was looking for an solution to this question (on StackOverflow). I found that 'styling' media player instance
<object id="mediaPlayer" classid="clsid:6BF52A52-394A-11d3-B153-00C04F79FAA6" type="application/x-oleobject"></object>
with this CSS
#mediaPlayer {
position: absolute;
z-index: -1;
}
was all that it took to have it not disappearing.
EDIT:
'Unfortunately' this did fix it, except when you start the player once 'touched' the Gadget would disappear like before.
I did find a way to 'fix' it. It appears not to happen when you use video in the player. It doesn't care if it's viewable. So you could consider finding a video stream for the audio you want to hear. In my case: I wanted to build a Gadget for the dutch radio station 3FM, and include a video stream in the the end.
This was a challenge itself: nothing more annoying than a a-sync video/audio stream. So i had to really 'think outside the box': the flyout consists only of the station's logo. The gadget itself is 'viewable' within the specified range. Except the video stream-container-div is hidden until requested to view and I invoke the gadget's flyout. So in the end: I fixed it, but it's no solution to the original question...
For those interested in the solution: 3FM-2011.gadget download