I need some help on displaying subtitles for a mp3 file. While it plays the audio on chrome but it does not display any subtitles. Secondly, once audio starts playing, it does not give an option to pick any controls(except volume).
Here is the snippet of the code. Any help will be appreciated!
<audio controls id="sample_audio" width="800" height="600" preload="none">
<source type="audio/mp3" src="7f1d4d9d-98f8-4e87-baca-4d883dfc37f4.mp3" />
<track src="./captions_output_1612284679.vtt" kind="subtitles" srclang="en" label="English" >
</audio>
This issue mainly related to Chrome preventing access to the local files and preventing the access when there is no https. In my case, do not want to expose the chrome insecure content.
As a solution, leveraged AWS S3 with cloudfront and that resolved the issue.
Related
in my angular project i am trying to create a movie streaming site where i want to display movie as well as subtitles.
i can play the video well but i am not able to load the subtitles .
i know this question might have been asked previously but wasn't useful in my case
here is my relevant html code
<video
class="video"
id="myVideo"
autoplay
#videoPlayer
>
<source
src="http://binzwatchftp.ddns.net/Hollywood/Others/Dunkirk%20(2017)/Dunkirk.2017.1080p.BluRay.x264-[YTS.AG].mp4"
type="video/mp4"
/>
<track
label="English"
kind="subtitles"
srclang="en"
src="http://binzwatchftp.ddns.net/Hollywood/Others/Dunkirk%20(2017)/dunkirk_subtitle.vtt"
default
/>
it gives me this error
can you please help me with this problem?
though it loads when i include the .vtt subtitle file in my project folder statically . But i want it to be fetched from online url
you can use read link to show show subtitles
https://developer.mozilla.org/en-US/docs/Web/Guide/Audio_and_video_delivery/Adding_captions_and_subtitles_to_HTML5_video
You are suffering from a CORS issue. This post will get you closer:
How to enable CORS for html5 video loading vtt file?
but you'll also have to loosen the crossorigin policy on the remote server (I got a second error that the server is not allowed to serve Localhost)/
I am unable to get my video to play in browser when I click the "play" button. I would greatly appreciate the help. Thanks!
<video poster= "videoposter.jpg" width="40%" height="40%" controls= "controls">
<source src="video/phone.mp4" type='video/mp4'/>
<source src="video/phone.webm" type='video/webm; codecs"vp8, vorbis"' />
<source src="video/phone.ogv" type='video/ogv; codecs="theora, vorbis"'/>
Your browser doesn't support the video element in HTML5.
</video>
Possible reasons could be :
1). File path of video isn't correct. Look at developer console in browser to get this rectified.
2). IIS in Win 7 Pro does not have mp4 in it's mime types. Must add add the mime type. see instructions for adding mime type in link below.
http://stackoverflow.com/questions/14079808/html5-video-is-not-playing-mp4-error-invalid-source/
First I made a screen recording as a video I would like to display.
Than I uploaded the video to VLC to convert the video.
I made one MP4 and a fallback for OGG.
I then moved the videos to my dropbox account so I can host them there.I right clicked and got the link to each video from dropbox. I am trying to use the links as the src in the video tags.
<video width="400" controls>
<source src="https://www.dropbox.com/s/m7emkfs994sgm5g/Untitled.m4v?dl=0" type="video/mp4">
<source src="https://www.dropbox.com/s/9owwdbm8p0nz1f0/oggguntitled.ogg?dl=0" type="video/ogg">
</video>
Even though I told VLC to convert it to MPV, the file extension is m4v.. Is that the same thing?
The video just shows blank. Not getting any errors either.Not sure what I missed.
The following Fixed it for me.
I made two changes:
change dl=0 at the end of your dropbox link to dl=1. I believe this makes it a download link instead of a page to view a download link.
Due to a bug in chrome on OSX certain mp4 files will fail to play correctly (some kind of graphics acceleration issue), but it won't fall back to the ogv. For this reason, i have placed the ogv as first since it will work on OSX-chrome, and platforms that don't support it should fall back to the mp4.
<video width="400" controls>
<source src="https://www.dropbox.com/s/9owwdbm8p0nz1f0/oggguntitled.ogg?dl=1" type="video/ogg">
<source src="https://www.dropbox.com/s/m7emkfs994sgm5g/Untitled.m4v?dl=1" type="video/mp4">
</video>
My HTML5 video player won't play a file longer than one hour. Here is my code:
<video src="/Movies/MP4/Blaa.mp4" controls="controls"></video>.
I am quite new to HTML5 so i am asking what the problem could be? Any answers are appreciated.
-Simon
It looks like you're only using a single mp4 file, so I'm not sure if this will help, but I was able to solve my problem by switching the order of my source files. From what I can tell, Chrome is able to play H.264 video (which is what is usually contained within the MP4 wrapper), but it is unable to play MP4 files. I'm guessing that they finally removed support for MP4 like they've been saying that they were going to.
Here's what my code used to look like:
<video width="640" height="360" controls>
<source src="http://example.com/video.mp4" type="video/mp4" />
<source src="http://example.com/video.webm" type="video/webm" />
<source src="http://example.com/video.ogv" type="video/ogg" />
</video>
From my understanding, when a browser tries to render an HTML5 video tag, it's supposed to skip over any source tags that it can't play, and attempt to play the first one that it can. For whatever reason, Chrome is not currently doing that. It's trying to play the MP4 anyway, and failing.
Even the video on the "Video for Everyone" page is failing for me now.
My solution was to switch the order of the source tags so that the webm video came before the mp4 video:
<video width="640" height="360" controls>
<source src="http://example.com/video.webm" type="video/webm" />
<source src="http://example.com/video.mp4" type="video/mp4" />
<source src="http://example.com/video.ogv" type="video/ogg" />
</video>
So far this has fixed the problem. Chrome now plays the webm file with no issues, and all other browsers I have tested still seem to work fine.
The only possible problem that I still need to test for is that I've read that the iPad had a bug that required the MP4 source to be listed first. I'm working on getting my hands on an iPad to see if that's still an issue.
For now, this solution fixed my problem.
Hope that helps!
The problem was that chrome won't play MP4 movie files at the moment. Safari is the only working browser right now.
Below is the code I am using for the video tag. I basically copy and pasted it off of the Video.js website (then updated with my own file names). At first I could get Chrome to work but not Firefox or Internet Explorer. Then I changed the "webm" tags to "web". This fixed issue with Firefox, but I still can't get any playback with IE9. It just shows up as if it trying to load. Right now I am simply trying to test it out using local files in the same root folder, so I don't think it is an issue with waiting for it to download. My video files range from 8.1 to 8.4 meg.
If anyone has any ideas one how to get this to play, it would be greatly appreciated. Thank you in advance.
The following is in the head tag:
`<link href="video-js.css" rel="stylesheet">
<script src="video.js"></script>
<script>
_V_.options.flash.swf = "video-js.swf"`
</script>
The following is in the html tag:
`<video id="example_video_1" class="video-js vjs-default-skin"
controls preload="auto" width="640" height="264"
poster="bdg-vid-poster.png"
data-setup='{}'>
<source src="bdg112412hr.mp4" type='video/mp4' />
<source src="bdg112412.web" type='video/web' />
<source src="bdg112412.ogv" type='video/ogv' />
</video>`
I'm not sure why you changed the name from webm to web - webm is the proper extension to use. That line should read:
<source src="bdg112412.webm" type='video/webm' />
Do you have valid video files for each of the three video types (mp4, web, and ogv)? What happens when you drag and drop the mp4 directly into IE9? Try the webm in Chrome and the ogv in Firefox.
If you are not certain your video files are valid, try downloading the sample files here. (See the "Download Video" links under the video).
Also helpful for me was the preload="auto" had to be preload="none" or else it waited to load the entire video before playing...a real drag...
Check the mime-type configured on the server.
I had problems with mp4 and IE9. And i just had to change the myme-tipe from video/mpeg to video/mp4.