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.
Related
<iframe src="learning.pdf">
<div>test<div>
<video controls>
<source src="somevideo" type="video/webm">
</video>
All the tags below the "iframe" or "object" tag just don't work. If i put them at the end of the tree, all the above tags work, or if i put them in the middle of several tags, all the tags below the iframe or object tags don't work, but the ones above them, work.
<div>test<div>
<video controls>
<source src="somevideo" type="video/webm">
</video>
<object data="learning.pdf">
<div>test<div>
<audio controls>
<source src="some song.mp3">
</audio>
Why?
Because you didn't close your iframe tag, so all your subsequent content is within it (and ignored*, because the actual content of the iframe is taken from "learning.pdf").
Don't self-close it, either; it has to be accompanied by a proper </iframe>:
<iframe src="learning.pdf"></iframe>
<div>test<div>
<video controls>
<source src="somevideo" type="video/webm">
</video>
When in doubt, validate your HTML.
* More accurately, it's treated as alternative content for browsers that don't support iframes.
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>
Like the title suggests, I've got a HTML5 video that is currently sitting behind a wrapping div, like so:
<div class="video-wrap">
<video poster="/Media/video/index.files/html5video/Circles_Sequence_MORE_TEXT_v05.jpg" style="width:100%" title="What is Customer Devotion?" id="html5_video_qlpjkwou10fcg14i">
<source src="/Media/video/index.files/html5video/Circles_Sequence_MORE_TEXT_v05.m4v" type="video/mp4">
<source src="/Media/video/index.files/html5video/Circles_Sequence_MORE_TEXT_v05.webm" type="video/webm">
<source src="/Media/video/index.files/html5video/Circles_Sequence_MORE_TEXT_v05.ogv" type="video/ogg">
<source src="/Media/video/index.files/html5video/Circles_Sequence_MORE_TEXT_v05.mp4" type="video/ogg">
</video>
</div>
The issue is that when the video plays, because of the constrictive div, there's no way to get any of the native right click controls up. I.e. I can't pause, play, loop, etc.
Is there a way around this without removing the div?
Thanks.
controls ="" attribute need to be added in video tag.
Example
<video width="400" controls>
demo
A nice workaround could be to popup the video. That way the user could interact directly with the video instead of the div.
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.
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.