Youtube type annotation in html5 videos - javascript

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

Related

How to get video quality control in HTML 5 player

I am using this HTML 5 player:
https://github.com/sampotts/plyr
All the configurations above are working fine.
I am working on an application that requires youtube videos to be shown in my app.
But I am not able to see quality control when using youtube videos.
Is it possible here?
Can somebody please help?
or
Can someone suggest some other way to use videos in my app?
You can use html Iframe to display Youtube Videos.
Can select a video and get embeded link and add it to src of iframe we can choose the height,width and autoplay options

Youtube controls accessibility report

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.

Can i play Google Documents files with Jw-Player?

I want to play Google Doc. files with another player. (Mediaelement.js - JwPlayer..) because Google Doc. is using its own youtube player and I don't like it. Jw- player doesn't play these links.
Direct link: https://drive.google.com/file/d/0B1uSjTW2E4FGd1ozV3JIakE1NE0/edit?usp=sharing
embedLink: "https://video.google.com/get_player?ps=docs&partnerid=30&docid=0B1uSjTW2E4FGd1ozV3JIakE1NE0&BASE_URL=https://docs.google.com/"
How can I play on of them in Jw-Player, Mediaelements or an alternative player?

Creating Subtitles with video hosted on Vimeo server

I need help with the Creating/Adding subtitles in sync with the video hosted on vimeo server. This video is embedded in a HTML page. I have the subtitles saved in .srt /.vtt / Notepad files.
Kindly suggest me the best possible options which can also used for commercial purpose. Please see the below image screensot
Customized player with vimeo is pseudo-impossible, but you can use subtitles with the follow link.
Your welcome:
https://github.com/Yomguithereal/vimeo-srt

Can Popcorn.js be used to add subtitles to a YouTube video?

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.

Categories

Resources