I have the following iframe:
<iframe src="http://www.youtube.com/embed/{{ item.getFieldCollectionItem().field_youtube.value }}?playsinline=0&rel=0&showinfo=0&controls=2&modestbranding=1&autohide=1" frameborder="0" width="300" height="169"></iframe>
however the the buttons generated from the API don't have text inside making them inaccessible. The accessibility report I have it mentiones the following:
"Unlabelled 2 Button"
I assume referring to the "play" and "pause" buttons.
Is there a way to make these more accessible by having a descriptive text inside?
Instead of fiddling with what YouTube gives us, I would recommend using a third-party video player that supports YouTube videos:
Able Player is available under the MIT licence. (Source code on GitHub.)
Plyr supports YouTube and Vimeo videos. The source code on GitHub is available under the MIT licence.
Video.js also supports YouTube videos if you add its YouTube plug-in.
There are other video players that devote attention to accessibility, but not all of them support YouTube videos.
Related
I am a little bit stuck right now with a code.
In fact, I would like to create Vimeo's videos autoplay list on my website using javascript as we can see on youtube.
As you will see on the script below, the click event allows changing the iframe videos. I'd like when my first video in my list of Vimeo's iframe videos end, the second video can start automatically to play as on youtube autoplay.
Please advise.
Here is the link to my script on codepen.io
https://codepen.io/fanhatcha/pen/XQoWdR
<iframe
id="playerarea"
src=""
width="850"
height="450"
frameborder="0"
allow="autoplay; fullscreen"
allowfullscreen>
</iframe>
<ul id="playlist">
<li vimeourl="https://player.vimeo.com/video/328821953?autoplay=0&loop=1&autopause=0&background=1&responsive=true">
<li vimeourl="https://player.vimeo.com/video/328821360?autoplay=0&loop=1&autopause=0&background=1&responsive=true">
</ul>
$(function() {
$("#playlist li").on("click", function() {
$("#playerarea").attr({
"src": $(this).attr("vimeourl"),
})
})
})
'create Vimeo's videos autoplay using javascript?' that just can be!
Vimeo(so is Youtube) are standalone programs. So they'll work only in embed context and won't use JavaScript who can manage and use DOM.
To set a video to autoplay you've to log into the Vimeo application and set it using theirs parameters before sharing it to your own page.
If you could use JavaScript on a program who's not yours it's a flaw and threat for the program...certainly you did agree use and terms of the licence of using Vimeo, so you're bind to their rules.
If you want videos and use them with JavaScript there's the HTML5 API video. By the way it'll require not using a corporate program who will reccord and display the video and use your own server to do that(or any source providing a video files and not a link to the vimeo/youtube application).
I am working on Web Application (it is classroom ) and I need to show the subtitles under the video like Coursra , when the user starts the video the pointer go and select the subtitles
I Suggest you to use Video.js
VideoJS
In my web app I have to embedd youtube videos, for that I am using iframe. it works properly in chrome in html5 player. but when I am trying in mozilla firefox the video plays in flash player. how do I force mozilla to open the video in html player. I'm using mozilla version 36. please help me.
code used ::
<iframe type="text/html" width="100%" frameborder="0" allowfullscreen height="315" src="http://www.youtube.com/videoLink">
You are using an outdated browser ! please upgrade
</iframe>
Youtube's JS picks the version it thinks is right for you. The decision is made based on various factors, one that might be relevant is that although Firefox supports the VIDEO element it does not (yet) support the so-called Media Source Extension functionality. I have no idea if that's why YouTube chooses to use Flash rather than a VIDEO element, but it may be one of the factors.
I have a video about style/trend tips and it features different clothes in it. I would like to link the clothes displayed in that video to its product page on online store. There is an option YouTube to do such thing using Youtube Annotation . But YouTube annotations does not provide linking to external link. So we cant link to google.com inside youtube annotations we can only link to other YouTube videos.
So Is it possible to add YouTube type annotations to html5 videos ?
Try popcorn.js
Demo link: Demo Link
Documentation: Docs
Try www.bittubes.com - we offer a tool fit for commercial use
Let's say we embed a YouTube video on a web page.
Underneath the video player, could we display subtitles synched to the video using a media framework like Popcorn.js?
Interesting you mentioned Popcorn.js, because Popcorn does support Youtube.
http://popcornjs.org/popcorn-with-youtube
Buuut, that documentation is out of date.
It is now:
"var example = Popcorn.youtube("
There are new docs on their way.
If you choose the HTML5 version when embedding the YouTube video and if it's actually being played within an HTML5 browser, it's just a video tag so you can use Popcorn.js. When it's a Flash, I'm not sure if you can get into that Flash and know the progress and listen to the events.
If you use the YouTube JavaScript Player API, you can use player.getCurrentTime() to find out which line of subtitling to show.
Then again, YouTube already supports subtitles to begin with.