we are developing an html5 / javascript application which renders images and videos on html5 canvas elements.
For the videos we use a mechanism which works as follows:
embedd a hidden html5 video tag on the page with the desired video as src
use requestAnimationFrame to render the canvas in a loop
on each render call we grab the current video frame from the video tag and render it onto the canvas.
Now we are looking for a way to play videos from youtube on the canvas.
The problem is that youtube only allows to embedd their players and dont have an option to just fetch the video url (to embedd in an own video element)
The html5 player their provide is placed in an iframe and thus we have no chance to grab the video frame from it.
Is there any way to do something like this. Or will youtube allow to fetch the video urls in future ?
I may be a bit late, but I came across this website, which renders a YouTube video in a <video> tag and then manipulates it on a canvas.
http://omgig.com/
Someone managed to get the source code for the site
https://github.com/endlesshack/youtube-video
The only problem I had is that it doesn't seem to work with vevo videos
Related
When you hover your mouse over a video in YouTube, it display a short animated video (see attached screenshot)
I checked the network tab in dev console and the URL is of the format
https://ytimg.com/an_webp/xxx/mqdefault_6s.webp?
However, the page source code doesn't include these links. Is there a way to get the thumbnails for videos on a YouTube page.
when you hover over a video it's GIF is created. You can create your own gif from any video using libraries like gif.js
I couldn't find a proper explaination, tutorial or thread online explaining the following: I "simply" want to load a Vimeo Video (where I have a pro-Account) without controls (play, pause, timeline, whatsoever) just the pure video (also without the black bar top and bottom) and stream it within a div I created. I want the video to be always fully filling this div.
How can I use the Vimeo-API to do that? I found examples of the Vimeo-API but nowhere I could find anything regarding loading the plain video file.
According to this answer, your Vimeo videos should have a "play in external player" link (Pro account required):
Go to your Video Settings and Video File, at the bottom there is a section called Use Your Own Player, you'll find there direct urls to your video.
You can embed that direct URL in a player of your choice - e.g. a <video> element:
<video src="http://player.vimeo.com/external/85569724.sd.mp4?s=43df5df0d733011263687d20a47557e4"></video>
You can create that <video> element using JavaScript, as well.
A plain <div> element can not dispplay video without some element to aid it.
I have a site (which is only viewed using Internet Explorer 7) that is made up of 5 sections and in section 2 I am currently using Vimeo to embed a video. The requirement is that the user has to watch all of it before proceeding to the next section. In order to achieve this I have used event listeners which only activate the ‘Next’ button to proceed when all of the video has been watched (Works Great)
Another requirement is for users to be able to play the video in full screen but the problem I have using Vimeo is that it does not support the option to hide the progress bar when a video is playing in full screen, this allows the user to skip the video. After researching around and contacting Vimeo support I can confirm that hiding the progress bar can only be achieved when viewing the video in standard mode when you have subscribed to the pro account (which I have).
I looked into targeting the CSS classes within the iFrame, and setting a display none value on the controls div but this is something that can’t be done.
I have looked at using YouTube as an alternative and you are able to hide the progress bar in full screen using this markup
<iframe width="560" height="315" src="https://www.youtube.com/embed/C0DPdy98e4c?rel=0&controls=0&showinfo=0?&fullscreen=1" frameborder="0" allowfullscreen=1></iframe>
I’ve done some reading on using the YouTube Player API Reference for iframe Embeds (https://developers.google.com/youtube/iframe_api_reference) but it says that one of the requirements is that the user's browser must support the HTML5 postMessage feature - INTERNET EXPLORER 7 DOES NOT SUPPORT IT :(
Could anyone suggest how I can achieve this, either by hiding the progress bar using vimeo in full screen or by implementing the youTube Iframe API to work with IE7?
Cheers
Paul
I don't see a parameter to remove the controls in a Vimeo video on their page on embedding. Also, the Vimeo FAQs say that the control bar gets hidden on an embedded video when it's less than a specified number of pixels wide.
You might have to do some sneaky CSS styling stuff instead. I did manage to find an article on hiding controls on an HTML5 video when viewing it fullscreen, but it said that IE does not support the full-screen API, so I'm not entirely sure what you're trying to do is actually possible on IE.
I have a youtube video embebed in a simple web, but what i really want is when i click the red and white button in the middle of the youtube video, it is displayed in the youtube player not in the mobile player.
Why?
Because if i want to use the youtube api and insert some graphics or images at diferent times during the duration of the video, that are not displayed if the mobile video player is open by default.
Could you understand what i want? Sorry for my english?
Thanks in advance
Why don't you simply copy the embed code from youtube ?
You can also use jwplayer in conjunction with javascript to display whatever you want on the top of the video.
example usage:
<div id="myElement"></div>
<script>
jwplayer("myElement").setup({
file: "http://www.youtube.com/watch?v=ac7KhViaVqc",
image: "/uploads/myPoster.jpg"
});
</script>
I have a website which contains youtube flash player. Player's code was copied from Youtube and pasted to an HTML of my page.
When I'm opening the page in iPhone or iPad, the player can't be covered by absolute positioned DIV tag. The div tag has z-index 1000 and covers all elements (youtube flash player too) on the page if I use normal PC. But in iPhone or iPad I can't cover youtube player by this div element.
I used many tricks with OBJECT and EMBED tags of flash element (adding style="position:absolute; z-index:0" and etc.) but no results.
Please assist how can I cover Flash element in iPhone or iPad.
please use an iframe. That's the way I've done it.
I found that on the iphone there are certain things that dont work but will work on a pc. I believe however Iframes are quite versatile with stuff.
Try it out. Let me know if it works.
You just had to add ?wmode=transparent at the end of the url of the youtube embed code to fix the problem.
It should work!