Adding hyperlink to html5 video captions using .vtt format? - html

Trying to add clickable hyperlinks to html video using the .vtt format.
Here is example captions.vtt file
WEBVTT
00:05.100 --> 00:06.000
[www.stackoverflow.com] // trying to convert this into a clickable link
00:08.000 --> 00:09.225
[ Splash...splash...splash splash splash ]
00:10.525 --> 00:11.255
[ Splash, Sploosh again ]
and here is my html5 video code
<video id="example_video_1" class="" controls preload="none" width="640" height="264"
poster=""
data-setup="{}">
<source src="video/video1.mp4" type='video/mp4' />
<source src="video/video1.webm" type='video/webm' />
<source src="video/video1.ogv" type='video/ogg' />
<track kind="captions" src="captions.vtt" srclang="en" label="English" />
</video>

It can be done with video-js player. To the video-js css file, or in the html file where your video is, add some styles like...
.video-js .vjs-text-track-display p.bigred {color:#f00;font-size: 36px}
Apply that in your vtt, like this:
00:05.100 --> 00:06.000
<p class="bigred">Splash...splash...splash splash splash
Did it work? If so, add this to your css:
.video-js .vjs-text-track-display a:link {color: #00f}
Add that to your vtt like this:
00:05.100 --> 00:06.000
Click here
Works in Windows Chrome, Firefox, IE10 and above, on Ipad (but not on iphones)

This is currently not possible, according to this comment
About links on text in subtitles - this was discussed early on in the definition of WebVTT, but rejected because TV subtitles don't have it. I personally think it's a good idea though, so we should discuss this for the next version of WebVTT.

Related

WebVTT captions not showing

I'm adding captions to a video I recorded, however none of the captions that I created in my captions.vtt file aren't showing. What is wrong with my code?
websites.html
<video width="320" height="480" controls>
<source src="IMG_1771.mp4" type="video/mp4">
<track kind="captions" label="Video Captions" src="captions.vtt" />
</video>
captions.vtt
WEBVTT
Title
00:00.000 --> 00:00.300
Good Morning
Subtitle
00:00.500 --> 00:02.000
My name is John Doe
Subtitle 2
00:02.500 --> 00:04.000
And today I will be giving reasons why video enhances websites
To play a subtitle on its own you should always define default attribute within the track tag to indicate which track is enabled Since you got only one track here you should indicate it as an active one.
Also, As MDN mentioned in the attribute section of track tag, whenever you add kind attribute to track tag you should indicate srclang too and it is necessary.
So the output should be something like this:
<video width="320" height="480" controls>
<source src="IMG_1771.mp4" type="video/mp4">
<track default kind="captions" label="Video Captions" srclang="en" src="captions.vtt"/>
</video>

Audio captions with HTML5 <audio> element

I would like to have the transcription of an audio file to be shown as the audio plays. I've tried several options to no avail:
<audio src="../audio/myaudio.mp3" controls>
<track default srclang="en" kind="captions" label="English subtitles" src="sub.vtt"/>
</audio>
The path to the .vtt file is correct. The <track> element is supposed to be child of both <video> and <audio> (see https://developer.mozilla.org/en-US/docs/Web/HTML/Element/track). Why can't I display my captions?
My .vtt file contains something like
WEBVTT FILE
1
00:00:03.500 --> 00:00:05.000
D:vertical A:start First line
2
00:00:06.000 --> 00:00:09.000
A:start second line
etc...
I've also tried by using the <video> element:
<video style="background: black; width:360px; height:260px;" src="../audio/mayaudio.mp3" controls>
<track default srclang="en" kind="subtitles" label="English subtitles" src="sub.vtt"/>
</video>
Still no luck. I can see the 'CC' button and I can also select the Elnglish subtitles item. The audio plays (even if I use the <video> element) and I can't see any caption. Swapping 'captions' with 'subtitles' doesn't help.

Hide Html 5 video play button from the screen

I want to hide the video play button which is shown in the screen , is there any way for that ? I am using html5 video player.
I am unable to add image of that here . Please check the link button , there is a image and video button is highlighted by red circle.
http://awesomescreenshot.com/02c4ocr318
Is there any way to complete this ?
Edit: code:
<div class="v" id="player">
<video id="myVideo" width="100%" height="100%" poster="1.png" controls >
<source src="nrgmom.mp4?title=0&byline=0&portrait=0" type="video/mp4">
<source src="mov_bbb.ogg" type="video/ogg">
</video>
<!-- <iframe frameborder="0" allowfullscreen="" src="youtube.com/embed/nMehBNvN_PM"></iframe>-->;
</div>
Remove controls attribute from video element.See this documentation for further information related to video element.
mozilla video element documentation
I would recommend You to use basic html element instead of any jquery/js plugins as it does not show any play overlay by default and works just fine in all browsers with html5 support. U can also customize is via css/js.
Check out: http://www.w3schools.com/html/html5_video.asp

How can I make vimeo videos responsive for html email?

I want my html email videos to be responsive. So what will be the procedure for that? Please let me know.
In your HTML file , make div and paste below code there...
<object class="responsiv-video">
<video autoplay >
<source src="file_name.mp4" />
<source src="file_name.3gp" />
</video>
</object>
it is to my understanding that you want to embed a video on your site that:
Is responsive
Allows both autoplay and loop
Uses Bootstrap
This Demo Here should do just that. You have to place another embed class outside of the object/embed/iframe tag as per the the instructions here - but you're also able to use a video tag instead of the object tag even though it's not specified.
<div align="center" class="embed-responsive embed-responsive-16by9">
<video autoplay loop class="embed-responsive-item">
<source src=http://techslides.com/demos/sample-videos/small.mp4 type=video/mp4>
</video>
</div>
Responsive mp4-video

How to get html video controls inside the video window

Sorry if this has been asked before (I definitely tried searching). I have an HTML video embedded on a page, and the player controls are displaying outside the video window. I'd like to get them inside the video window, but I can't seem to find any customization available for the controls attribute.
I know the HTML <video> tag isn't very customizable, but I've seen many HTML videos display in the desired way (with controls inside the video window, not outside), so I assume it's possible.
Example of what I'm trying to do: http://easyhtml5video.com/
How it currently looks:
It appears that the height attribute is the problem.
Without the height attribute:
<video controls="" id="videoelement" width="480" style="margin:auto; padding-left:107px" webkit-playsinline="">
<source src="http://easyhtml5video.com/images/happyfit2.mp4" type="video/mp4" />
<source src="http://easyhtml5video.com/images/happyfit2.webm" type="video/webm" />
<source src="http://easyhtml5video.com/images/happyfit2.ogv" type="video/ogg" />
</video>
With height attribute:
<video controls="" id="videoelement" width="480" height="360" style="margin:auto; padding-left:107px" webkit-playsinline="">
<source src="http://easyhtml5video.com/images/happyfit2.mp4" type="video/mp4" />
<source src="http://easyhtml5video.com/images/happyfit2.webm" type="video/webm" />
<source src="http://easyhtml5video.com/images/happyfit2.ogv" type="video/ogg" />
</video>
The height attribute should be the actual height of the video.
height of your video tag should match the height of the actual video resolution....
here is the FIDDLE
In this the video resolution is 604px X 256px
If the video tag has 604x256 then the controls stay within, if I changed the height to 356 as demonstrated in the fiddle, then the controls are going outside the video.
You might want to check your video resolution and compare it with the height of your video tag.
Not sure if width matters though.