hopefully you can help!
On my website's local version, in my file structure I have a file test.vtt, captions for a short video. I'm using Dreamweaver to edit it.
Edit: I'm using Bootstrap 5 framework and using the default video-player.
<div class="embed-responsive">
<video class="rounded-3" poster="assets/videos/poster.jpg" preload="metadata" controls style="max-width: 100%;" crossorigin="anonymous">
<source src="assets/videos/video1.mp4" type="video/mp4">
<track label="English" kind="captions" srclang="en" src="assets/videos/test.vtt" type="text/vtt" default/>
</video>
</div>
I've connected to the remote server via DreamWeaver FTP, and uploaded the relevant files including test.vtt
When accessing the local website preview in DreamWeaver, the subtitles work flawlessly which is superb! Unfortunately, when I upload all the local files to the remote server and preview the 'live version', on Inspect Element I can see an error:
Failed to load resource: the server responded with a status of 404 (Not Found)
for the file test.vtt - despite me looking at the servers' file structure and finding the file!
Apologies - I'm pretty basic but cannot fathom out how to get the subtitles working on the live version. Anyone have any idea what I could try? I've tried moving the test.vtt file into various levels of folder substructure so it's next to the index, in case it was that! I've tried renaming and re-doing the file from scratch, too.
Any help greatly appreciated!
What I've tried:
Moving the test.vtt file around in the folder hierarchy in case it can't find the file?
Remaking the test.vtt file from scratch,
Naming it something else,
Re-uploading it to remote server alongside the other files required files (which all worked other than test.vtt)
Reading dozens of articles online and trying to re-structure the div to have 'track' both inline and separate but neither solution works. Also tried other bits like 'cross-origin' but doesn't resolve anything.
Appears to be a file issue on server, does it not? Sorry - I'm a bit new to all of this!
Since the server does not seem to detect the VTT file at all, I am wondering if the server is configured to recognize and serve VTT files. You might need to add a configuration that sets mime type as VTT file. Have you successfully served VTT files from this server before? Here is an article on this subject: HTML5 track captions not showing.
Related
I have create an html file in VS Code which included a mp3 file and and the audio run all well whedn I try opening it in may browser. However, when I uploaded the folder into Github in order to get the url link through the Github Pages, the audio .mp3 file was said to be too big. '(Sorry about that, but we can’t show files that are this big right now.)'
Any ideas to solve this issue? Thank you very much!!!
I am using DigitalOcean Spaces/Buckets to store audio files and have a URL being generated which points to that file.
In my html file, I am accessing that audio as:
<audio controls>
<source src="my_digital_ocean_file_url">
</audio>
This file is not getting played on the front-end and when I enter the URL on chrome, the file gets downloaded instead of playing on the browser. Is there a way to make the files on the URL playable?
This is related to the backend. You need to provide 'contentType' as audio. The implementation is different based on the programming language you are using for the backend. Please check the sample code in PHP.
$s3->create_object($bucket, $file_name, array(
'fileUpload' => $resized_image,
'contentType' => $_FILES['image']['type'],
'acl' => AmazonS3::ACL_PUBLIC
));
The above issue is not limited to audio files, it's for PDF, Images as well. Follow are some helpful reference
How to view pdf's stored in spaces without them being downloaded
amazon s3 - image downloading instead of displaying in the browser
I was using and outdated browser. Updating the browser solved the issues for me.
I am using node.js server to upload a video. I am successfully able to add it in /public/uploads folder of my project and save the FilePath to MongoDB.
Inside my ejs, file, I am retrieving videos, by following segment of code
//Videos is the array of objects which I have retrieved from mongoDB
//video.VideoFilePath is in the form "public/uploads/1591780899727_Test_00000.mp4" (i.e filename.mp4)
<%Videos.forEach(function(video){%>
<video width="320" height="240" controls>
<source src="<%=video.VideoFilePath%>" type="video/mp4">
</video>
<%});%>
In the console, I a getting the following errors
HTTP “Content-Type” of “text/html” is not supported. Load of media resource http://localhost:5000/public/uploads/1591780899727_Test_00000.mp4 failed.
All candidate resources failed to load. Media load paused.
Earlier I thought this might be due to path, but I have tried using the absolute path as well it doesn't work. I have tested on both Firefox and chrome, it doesn't work in any case.
I have taken care of public directory inside my app.js, if that is the concern.
app.js
app.use(express.static(__dirname + "/public"));
Kindly, lemme know how can I fix this I have read many stack overflow posts, none seems to help.
I had the same issue, I realized I hadn't set my Video File Path Source as a static directory
In my app.js I added this
app.use('/videofiles', express.static('/videofiles'))
hope this helps.
I have a webpage with an audio player - normally the code would look like this
<audio controls="controls" preload="auto">
<source src="http://the_full_path/file_name.mp3" type="audio/mpeg" />
Your browser does not support the audio element.
</audio>
I want people to be able to listen to the file using the player without being able to download the file its playing. These are the first steps I took:
was adding controlsList="nodownload" to the player
disabling right click oncontextmenu="return false"
The problem: from any browser going to menu 'view-> page source' or clicking F12/Cmd+u will show the code thus the link will be reviled.
How can I achieve my desired outcome?
'and obviously there is a way to do it'
No there's not !
#zero298 answer is perfectly right(any resaerch you will do will said the same and you see your question is commonly asked for years with same answer.
All stuff you can do can easily be override because in order to use a file client side the file is download on client(cache) in order to be use by browser in local place.
Look to how WWW work and you'll understand better i think:
web server send(upload) HTML and others files related to client who get it(download) for use.
That's root of a network and can't be otherwise. If you need anything to be shared on a network you've to send it. So you can see/use(an get) a file who is not shared nor block a file once it is send.
I have a simple web page written in HTML for testing video streaming.
<video controls name="media">
<source src="external_url.mp4" type="video/mp4">
</video>
That's work in local, but when I upload the page on my free web hosting, the page doesn't load any video. Is there a workaround? Maybe using an embedded player?
update
I've discovered that's a problem related to video. Unfortunately I cannot link it because it's for a private presentation, but I've tried with other videos and that works well. Any idea why my video doesn't play?
Please check that the URL is intact.
Check if there might be some file discrepancies. The control currently supports mp4, ogg, and webm as seen here.
Use the canPlayType() method to test the site AFTER the upload - just to be sure we're covered on that front. See here for the DOM reference.
You can fiddle around here if you don't want to have to upload the site first before live-testing it.
Hope that helps.
How do you upload the video? If FTP, text transfer mode may have ruined the file. The hosting (especially, a free one) can impose a limit on the file size (uploaded or served) too. Or even on content types (e.g. narod.ru didn't allow to read files directly, serving a "download page" on an attempt instead).
Try to download the video file directly and compare it with the reference one.