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.
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)/
So what I'm trying to do is to play a HLS m3u8 file from an Backblaze B2 bucket that I have (via B2's S3 API) . The problem that I have is an HLS file is made up of both the .m3u8 file which keeps track of all the .ts files which are the parts that the .m3u8 file needs to play. So the problem I have is when putting the .m3u8 file into an HTML video tag nothing happens even in a browser where HLS files are compatible i.e Google Chrome.
I have checked other similar questions, but none of them seem to work, because the ts files are always missing.
I know the problem is the .ts files are missing but I have no clue how to reference them as well from my web server. Is there any way I can somehow play a HLS file and all its parts from a HTML video tag?
My current code is like so:
<video width="1920" height="1080" controls>
<source src="https://f002.backblazeb2.com/file/ARandomBucket/index.m3u8" type="application/x-mpegURL">
Your browser does not support the video tag.
</video>
Different browser have different support for video files and streaming formats.
Currently Desktop Safari and Edge latest version support 'native' HLS support but Desktop Chrome does not. You can see uptodate support info in a number places such as:
https://html5test.com/compare/feature/streaming.type.hls.html
By 'native' in this context, it means the browser can recognise the streaming format or file type when it is included as the 'source' attribute within the HTML5 tag and play it without any further code or plugins etc.
To allow you play your file back on Chrome at this time the usual approach is to use a Javascript Video player which will use the browsers support for Media Source Extensions (MSE) to interpret and prepare the HLS steam for playback. Some common open source examples include:
Video.js (https://github.com/videojs/video.js)
Shakaplayer (https://github.com/google/shaka-player/)
There are plugins available also for Chrome to play HLS if you do not want to use one of the above players for some reason for your solution, but these require the user to have installed the plugin, whereas the above players should work on any up to date browser release for the major Desktop browsers.
Okay so I've found a solution to my problem using video.js + video.js http streaming.
I needed to set my CORS rules on my Backblaze B2 Bucket, it's a setting on the screen with all your buckets to "Share everything in this bucket with all origins."
Next I just used this code segment using both video.js and the plugin for it for hls streaming for all major browsers with it which is video streaming https. Both of them just require a simple script tag from their respective cdns.
The documentation you need is found here: https://videojs.com/getting-started/ and here: https://github.com/videojs/http-streaming and you need both as they perform different functions.
So the code that I found finally works in my case is:
<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
<meta charset="utf-8">
<title>My Video</title>
<link href="https://vjs.zencdn.net/7.7.6/video-js.css" rel="stylesheet" />
<!-- For IE8 (for Video.js versions prior to v7)
<script src="https://vjs.zencdn.net/ie8/1.1.2/videojs-ie8.min.js"></script>
-->
</head>
<body>
<h1>My Video</h1>
<video-js id="my_video_1" class="vjs-default-skin" controls preload="auto" width="640" height="268">
<source src="https://f002.backblazeb2.com/file/ARandomBucket/index.m3u8" type="application/x-mpegURL">
</video-js>
<!--This is for Video.js by itself -->
<script src="https://unpkg.com/video.js/dist/video.js"></script>
<!--This is for HLS compatibility with all major browsers-->
<script src = "https://unpkg.com/browse/#videojs/http-streaming#1.13.3/dist/videojs-http-streaming.min.js"></script>
<script>
var player = videojs('my_video_1');
</script>
</body>
</html>
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/
I'm on a server still running ColdFusion version 8. I'm not sure if this is my problem though.
I have the following code that I can get to work in my computer on my desktop, using both Firefox and Chrome. I access it as an html file directly using a file system url, i.e. file:///C:/.../test.html
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<title>test</title>
</head>
<body>
<p> Try w3Schools test video</p>
<video width="320" height="240" controls>
<source src="movie.mp4" type="video/mp4">
<source src="movie.ogg" type="video/ogg">
Your browser does not support the video tag.
</video>
</body>
</html>
When I put this test.cfm or test.html page up on the Coldfusion 8 server, neither browser displays the video. The movie.mp4 and movie.ogv files are up on the server in the same directory as the test.cfm file. In Firefox I get:
"No video with supported format and MIME type found."
In Chrome it shows the video controls but no video is present.
Is there something I need to enable on the server (it is a shared hosting account)? Perhaps this is not particular to ColdFusion and I'm making another mistake (note this is my first attempt to use the video tags).
Thanks
P.S. If I access it on my computer using Aptana's launch mechanism and running in:
127.0.0.1:8000/.../test.html
I get the same problem as running on the server. The videos do not display.
Courtesy of Miguel-F's guidance, the server was missing support for the .mp4 and .ogv mime types. When the hosting company added those to the server, the videos displayed.
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.