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.
Related
I have a video in which I want to disable fullscreen playing with html5 video tag in iPhone,
I tried different solution as suggested in StackOverflow but none seemed to solve the problem.
Here is my solution by adding playisinline=1
<video id="orange-video-1" class="videotag active" preload="auto" playsinline=1 webkit-playsinline=1 src="emptyvideo/emptyvideo.mp4" muted>
</video>
what do I need to change to get what I want?
Actually you don't need to set it to equal one. playsinline should work.
Try this instead:
<video id="orange-video-1" class="videotag active" preload="auto" webkit-playsinline playsinline src="emptyvideo/emptyvideo.mp4" muted>
</video>
Doing it from a jQuery view would also work:
// Sets the attribute, empty second parameter needed
// otherwise it would be a getter func
$('video').attr('webkit-playsinline', '');
$('video').attr('playsinline', '');
// Set the webview on iOS
webview.allowsInlineMediaPlayback = true;
If that doesn't work:
Reading Apple's documentation it appears you would use the following code since playisinline=1 works if the website is stored on the home page. Try this in your config file:
<preference name="AllowInlineMediaPlayback" value="true" />
https://jsfiddle.net/kaldenfi/rpmk93wm/3/
<div ng-app="myApp" ng-controller="testCtrl">
<section ng-if="url">
<video id="player1" playsinline autoplay loop muted volume="0.0">
<source ng-src="{{url | trusturl}}" type="video/mp4"> Your browser does not support the video tag.
</video>
</section>
</div>
After updated to chrome 64, this is no longer muting my video. If i take the video outside of the ng-if and hardcode the url it works as it should
Any solutions?
Okay found a temporary solution, if I move the ng-if to the source tag, it mutes it correctly.
Chrome 64 must be doing something when the page first loads it's looking for any video tags, so if your video tag isn't there on load it won't run the muted tag
I had the same issue in an Ember application I am working on.
The 2 solutions I had:
move the <video> tag(s) to the index.html, like you similarly did
create a function that can be called on an init or window.onload hook
mutePlayer1VideoHack() {
const player1Video = document.getElementById('player1');
player1Video.setAttribute('muted', true);
}
I prepended the function name in #2 with Hack in the case this is a true Chrome 64 bug that will be fixed. I am going with solution #1 for my case
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>
I have a problem with getting sound to play and pause within my JS and HTML code.
I have a function that takes the two tracks inputted, pauses one, and plays another, for use to create dynamic music based on where the user is or what it is doing. However when the function is called, neither track is played or paused. I've looked up online to make sure that I'm using the proper audio formatting and from my research I have been. I'm currently stumped as to why this isn't working so a fresh set of eyes may help to figure out the problem.
My Javascript:
function playTrack(musicon, musicoff) {
document.getElementById(musicon).play();
document.getElementById(musicoff).pause();
}
My HTML
<audio id="themeD" autoplay="autoplay" loop="true">
<source src="d.ogg" type="audio/ogg" />
<source src="d.mp3" type="audio/mpeg" />
</audio>
<audio id="themeE" loop="true">
<source src="e.ogg" type="audio/ogg" />
<source src="e.mp3" type="audio/mpeg" />
</audio>
<a class="button" onclick="javascript:playTrack('ThemeE','ThemeD');">Change audio</a>
Somewhat of a beginner with Javascript and definitely a noob with audio elements so any and all help or tips would be appreciated.
Watch your spaces. You play the audio with the id Theme E, but the id of your audio is themeE
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.