I am trying to display my Subtitles in video. I have mp4 video and ttml file for the video. When put it in html code, the video is playing but no subtitle is coming[Checked in chrome].
When I checked in IE11 it shows the CC option in the HTML5 video player but there also no subtitle is coming.
Here is what I have tried
http://jsfiddle.net/ilaiya/s49zessy/
<video controls autoplay height="400" width="400">
<source type="video/mp4" src="https://ccdpoc.blob.core.windows.net/asset-b82767bd-bf28-4e03-a2d2-329d6df2b633/Index.mp4?sv=2012-02-12&sr=c&si=107ca7bf-272e-48a9-b824-a48da8b7fe90&sig=o8PPGNFD6k0B7PMwdvZdjEy%2FuRc2r4urqqFd5GJyN2k%3D&st=2014-12-10T10%3A40%3A14Z&se=2016-12-09T10%3A40%3A14Z">
<track src="https://ccdpoc.blob.core.windows.net/sourceaes34/subtitle.ttml" label="English subtitle" kind="subtitles" srclang="en-us" default>
</video>
Chrome does not support TTML out-of-band text tracks. Currently, only WebVTT can be used inside of the element.
In general, Chromium is trying to remove XML from Blink: https://groups.google.com/a/chromium.org/forum/#!topic/blink-dev/vXuOTK5M0hM.
Related
I'm trying to display my captions with my audio, and it seems like chrome loads it, but i dont see it on the screen, maybe it's because it's at the bottom of the div body?
I see the controls on the screen, but i don't see the audio.
<audio id="player" autoplay="" src="data/audio/Voice 006.m4a">
<source type="audio/m4a">
<track src="data\audio\subtitles.vtt" kind="captions" srclang="en" label="English" default="">
</audio>
This is my .vtt file
WEBVTT
1
00:00.000 --> 00:02.111
Hi my name is sam
2
00:02.888 --> 00:06.555
I wanna see what letter names, letter sounds and words you know.
3
00:07.111 --> 00:10.555
Let's answer some questions together and see how you do.
The <audio> element does not directly support WebVTT.
One option is to play your audio using a <video> element, which does support WebVTT.
I have added a text overlay with href link, its working with html5 video, but when i switch video in fullscreen mode, href link is not working, I can see the text(ui) in the fullscreen mode video, but unable to click.can anyone help me?
Jsfiddle
<video id="v" controls>
<source id='mp4'
src="http://media.w3.org/2010/05/sintel/trailer.mp4"
type='video/mp4'>
<source id='webm'
src="http://media.w3.org/2010/05/sintel/trailer.webm"
type='video/webm'>
<source id='ogv'
src="http://media.w3.org/2010/05/sintel/trailer.ogv"
type='video/ogg'>
<p>Your user agent does not support the HTML5 Video element.</p>
</video>
<div id="overlay">
This is HTML overlay on top of the video! </div>
thanks
I have a webm with transparency. If the browser can't show it, I want to show an image instead.
I tried the following first:
<video autoplay loop muted>
<source src="http://video.webmfiles.org/big-buck-bunny_trailer.webm" type="video/webm" />
<img src="http://placehold.it/350x150" />
</video>
This posed two problems:
Internet explorer doesn't show anything at all.
Firefox shows the webm with a black background; no transparency.
I gave up a little and took to Javascript (and Modernizr):
<img ... class="shittybrowser" />
<video ... class="gloriousbrowser" style="display:none;" />
if(Modernizr.video.webm){
$(".shittybrowser").hide();
$(".gloriousbrowser").show();
}
This fixed the problem in Internet Explorer but Firefox still claims to do webm, despite only half-assing it.
How do I make sure only browsers that can display webms with transparency does so?
You can set image as value of poster attribute at <video> element
poster
A URL indicating a poster frame to show until the user plays or seeks.
If this attribute isn't specified, nothing is displayed until the
first frame is available; then the first frame is shown as the poster
frame.
<video autoplay loop muted poster="http://placehold.it/350x150">
<source src="http://video.webmfiles.org/big-buck-bunny_trailer.webm"
type="video/webm" />
</video>
This question already has answers here:
Display fallback image even if the browser supports html5 video
(2 answers)
Closed 6 years ago.
I have extensively read and tried every solution in other threads with no luck.
My issue is this: when a browser does not support video tag, the backup image that I have set up does not show, and the video-div shows nothing but the background of body.
Here is the code I am using for the video/image:
<div id="video-div">
<video id="landing-video" autoplay loop>
<source src="images/landing-video.m4v" type='video/mp4; codecs="avc1.42E01E, mp4a.40.2"'>
<source src="images/landing-video-webm.webm" type='video/webm; codecs="vp8, vorbis"'>
<img src="images/landing-video-backup.JPG" title="Your broswer does not support the <video> tag"/>
</video>
From MDN
poster
A URL indicating a poster frame to show until the user plays or
seeks. If this attribute isn't specified, nothing is displayed until
the first frame is available; then the first frame is shown as the
poster frame.
You need to use poster attribute not an image tag.
<video id="landing-video" poster="images/landing-video-backup.JPG" autoplay loop>
<source src="images/landing-video.m4v" type='video/mp4; codecs="avc1.42E01E, mp4a.40.2"'>
<source src="images/landing-video-webm.webm" type='video/webm; codecs="vp8, vorbis"'>
</video>
I am trying to add a static image as fallback for video background in html 5 but not getting the output can anyone help.
<div class="background-wrap">
<video id="video-bg-elem" preload="auto" autoplay loop muted>
<source src="media/Digital Marketing Agency in CT - Mediaboom.ogv">
<img src="/media/staticimage.jpg" title="Your browser does not support the <video> tag">
Video not supported
</video>
</div>
Check for you image path and replace the <video> tag in the title with < >
<div class="background-wrap">
<video id="video-bg-elem" preload="auto" autoplay loop muted>
<source src="media/Digital Marketing Agency in CT - Mediaboom.ogv">
<img src="/media/staticimage.jpg"
title="Your browser does not support the <video> tag">
Video not supported
</video>
</div>
I suggest that instead of using an image inside the video area, you use a background image.
#video-bg-elem {background-image: url(media/staticimage.jpg);}
<div class="background-wrap">
<video id="video-bg-elem" preload="auto" autoplay loop muted>
<source src="media/Digital Marketing Agency in CT - Mediaboom.ogv">
Video not supported
</video>
</div>