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)/
Related
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.
I'm trying to create a movie player on my localhost but I have an issue, when I try to play a movie (.mp4) file it seems like my video is not loaded (movie size is 2.4gb) but when I try with another .mp4 file with less size (60mb) works perfectly! I'm using video html tag and I tried with videojs but I have the same issue.
This is a short example of what I'm using:
<video id="my-video" class="video-js" controls preload="auto" width="640" height="264"
poster="Images/Image1.jpg" data-setup="{}">
<source src="RootFolder/Pelicula2.mp4" type='video/mp4'>
<p class="vjs-no-js">
To view this video please enable JavaScript, and consider upgrading to a web browser that
supports HTML5 video
</p>
</video>
What could be the problem and what can I do to solve it? Maybe its a problem with my source src? Should I try it with another format?
UPDATE:
I change my Files folder to my desktop and now this is my code:
<video controls>
<source src="C:\Users\franc\Desktop\Movies\Pelicula2.mp4" />
</video>
With this I get the following error message Not allowed to load local resource: file:///C:/Users/franc/Desktop/Movies/Pelicula2.mp4 but when I click on that hyperlink it opens another window and the video is displayed properly.
using
C:\Users\franc\Desktop\Movies\Pelicula2.mp4
is allowing the browser to access content from the user local system which is not allowed to do directly in the browser you can host your video on any blob like amazon s3 or Microsoft azure or if you have to put that folder in your c:\ directory you will need to create a simple server that serves this file to the client maybe you can look into Node.js it will be your easiest solution specially if you have experience working with JavaScript
Edit :
After doing some research i found that you can disable this security feature in your browser manually just type the following in the Terminal
> "C:\PathTo\Chrome.exe" --allow-file-access-from-files
Make sure you replace PathTo with the current path of chrome on your system
source : http://www.chrome-allow-file-access-from-file.com/
Yesterday I started working with HTML5 Autoplay and also adding HTML5 Tag aka Subtitles.
I am having trouble to understand why when I am playing a sample of an *.mp4 video it can display the subtitles through the relative path (file:///Users/user/Desktop/test.html) but if I execute the file through the Pycharm for example it produces this file path (http://localhost:63343/Desktop/test.html) on the browser and it loads the subtitles just fine.
So I am wondering if there is a way to solve my problem. How can I load the subtitles through the absolute path (file:///Users/user/Desktop/test.html). Is there something that I am missing here?
I am using google-chrome as a web browser.
Update: I was trying to debug my web page and I got the same error as Crossorigin errors when loading VTT file. Where same people say that they were able to solve this problem by Disable same origin policy in Chrome. I tried restarting my browser with the following way (open -a Google\ Chrome --args --disable-web-security) but it did not had any difference on my problem.
Update 2: I just tested the same problem on alternative browser Safar (Version 9.0.2 (11601.3.9)). On Safari I am able to see the subtitles with the (file:///Users/user/Desktop/test.html) and with (http://localhost:63343/Desktop/test.html) the video is not displayed.
With Google-Chrome (Version 47.0.2526.106 (64-bit)) I can play the video both ways but I can only see the subtitles with (http://localhost:63343/Desktop/test.html).
Further search on the web helped me to find CORS settings attributes where the user can set crossOrigin property either to (anonymous) or (use-credentials). I also tried that, the result was black screen in video.
So in conclusion I believe is a security issue and not a path file issue.
Sample of test.html code:
<!DOCTYPE html>
<html>
<head>
<title>Sample of video with vtt file</title>
</head>
<body>
<video id="video" controls preload="metadata" width="350" height="250" autoplay>
<source src="SampleVideo.mp4" type="video/mp4">
<source src="SampleVideo.ogg" type="video/ogg">
<track label="English" kind="subtitles" srclang="en" src="subtitles-en.vtt" default>
</video>
</body>
</html>
Sample of subtitles-en.vtt file code:
WEBVTT
Introduction
00:00:00.000 --> 00:00:02.000
Wikipedia is a great adventure. It may have
its shortcomings, but it is the largest collective
knowledge construction endevour
Disclaimer
00:00:02.000 --> 00:00:05.000
This is just a track demo using VTT
I see that you have solved it yourself, but you are correct, it is indeed a security issue in that you cannot access files on the local filesystem that way.
I'm uploading a mp4 video and a wmv video to my sub-domain within my companies website. Next: I go to the mp4 url and get "The page cannot be found". Next: I go to the wmv url and the file begins to download immediately. Sketchy?
So I'm using the video tag like this:
<video width="640" height="480" controls>
<source src="movie.mp4" type="video/mp4" />
Your browser does not support the video tag.
</video>
Here's the result (it shows nothing):
http://rstillman.telicfootwear.com/telicretail.html
Research has taught me to change my web.config file but then I just end up with parse errors
Parse Unrecognized configuration section system.webServer.
What exactly is the problem? The movie doesn't run because the source of the movie (http://rstillman.telicfootwear.com/movie.mp4) doesn't exist... hence it doesn't play.
Are you sure you uploaded it to that exact location?
If you have uploaded the file to the correct path within the webserver then I would check that you have a MIME Type defined for the file type.
See http://technet.microsoft.com/en-us/library/cc725608(v=WS.10).aspx for instructions, and you'll need to make sure you have added mp4 as the extension and video/mp4 as the MIME Type.
If you intend also serving other video types (webm, ogg) then you'll also need to add their MIME type entries
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.