I built a very simple personal website and hosted it through FTP.
In the site, I have 2 videos I would like to play. Using the video control class in HTML, I put the video onto the site. Locally, my video plays fine. However, the moment I upload my website online, the videos stop working. I have double checked that my code is identical and the two videos are in my website.
Here is my code for the video control class.
<div class="musicVidSub" id="musicSub3">
<video controls class="musicVid" id="musicVid5">
<source src="images/flute5.mp4" type="video/mp4">
Your browser does not support the video tag.
</video>
<div class="musicDes" id="musicDesVid">
Description
</div>
</div>
If you want to check out the situation yourself, the site is ericamwang.com
If anyone could help me figure out why, that would be very helpful. Thank you in advance!
The folder on your website is spelled with a capital I. You must use
<source src="Images/flute5.mp4" type="video/mp4">
Windows does not differentiate between lowercase and uppercase letters in the file system, but Unix/Linux does. That's why it works on your local computer, but not on the web server.
Related
Super green on some of this stuff so I apologize in advance.
I want host video files on my website and have them play in the browser. Currently, when going to the hosted file it just downloads the .mp4. Is there a way to set up a folder of videos to play the video in the browser automatically instead of downloading? I'm trying to avoid having to maintain html and embedding videos. I'd rather just send a url to the specific video and the end user only play that video in the browser.
I have the files hosted on Domain.com. Ideally, I would send a subscriber a link like "www.website.com/videofolder/video_name.mp4" and that video would just play in the browser. Is there a way to do this without making separate html files for each video?
You will have to send an html wrap with the link, this:
<video width="320" height="240" controls>
<source src="url/to/movie.mp4" type="video/mp4">
Your browser does not support the video tag.
</video>
Otherwise you'll just be sending a file stream, hence the download you're seeing.
I will also recommend you to explain:
How you're providing the file to the browser (Hosting),
Are you using NodeJS, Flask, Django, NGINX, AWS S3, etc.
So other contributors have more idea of how to help you out.
I'm building a website with php that echos the following html:
<!DOCTYPE html>
<html>
<head>
</head>
<body>
<video id="video_media" style="position:relative; z-index:1; display:block; margin-left:auto; margin-right:auto; width:700px;" controls>
<source src="uploads/15 dialogo 13.mp4" type='video/mp4'>
</video>
</body>
</html>
When I view the page in google chrome there is only a set of controls. The audio plays if I press play, but the video does not show in google chrome. In safari and microsoft edge the video will show up and play fine with the controls.
I didn't tag php in this because when I make an html file with this code the same thing happens, so I'm fairly sure its not an issue with the php.
I've googled this a lot in the last couple days and I haven't been able to find anything about other people having the same problem. I've changed settings on chrome on my computer to try to view the video but that hasn't done anything. I also don't think that it's a chrome settings issue since I've never noticed other sites' videos not playing on my browser.
If there's an obvious answer that I'm missing, sorry... I'm fairly new to web design and I've never used videos on a web page before. If there is another question that has been asked that has the same answer, also, sorry. I did search here first, but I might have missed it. Please just point me to that page. Thanks,
------------UPDATE------------
It doesn't work on firefox either by the way.
Also, I can download the file with audio and video working after download. It's just not playing in the browser.
Can you try with:
<source src="./uploads/15 dialogo 13.mp4" type='video/mp4'>
or meaby changing the name of the video:
<source src="./uploads/test.mp4" type='video/mp4'>
--UPDATE--
Apparently the problem is generated by video codecs
I have one mp4 video that won't play in Chrome or Firefox. The audio plays, with the controls, but no video. What fixed it was pulling the video into Final Cut Pro, which said that it was a non-standard size or format, then I "shared" (exported) the file back onto my hard drive. The new file plays in all the browsers. The file size jumped from 32 MB to 98 MB, for a three-minute SD video.
I have a video.avi file and and html page on a server, and I would like to "embed universally" my video inside the html so that people could see it. By universally I mean in a way where I would be the less dependent on browsers/video viewers the viewers could have. In fact (I am dreaming for sure) I would like everyone with every "decent" "recent" browser to be able to see it...
I know how noob it sound, but I had a working html code who stopped doing the job a couple of weeks ago (the video does not appear anymore) and I would like to solve the issue once for all...
(I don't want to upload my video to youtube and to embed a youtube video though.)
I indeed opted for :
<video width="1020" height="310" controls>
<source src="myvideo.mp4" type="video/mp4">
</video>
and realized a pretty decent conversion with one of the first freewares I found online, I don't want to advertise for.
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 am working to develop a desktop application for PC using node-webkit. When I run the app with node-webkit everything works great with the exception of the mp4 videos. The html 5 video box pops up, but it is pure white and the controls are grayed-out in the same way it does if I provide a bad file path and run the app in chrome. An example piece of my index.html file:
<div data-role="popup" id="popupVideo" data-overlay-theme="a" data-theme="c" data-tolerance="15,15" class="ui-content">
<video width="497" height="298" style="max-width:100%;" controls>
<source src="base/tutorialvideos//General_Tutorial.mp4" type="video/mp4">
Your browser does not support the video tag.
</video>
</div>
<div class="ui-btn ui-btn-right">
Tutorial
</div>
I double-checked the file path several times, and tried all combinations of /, //, \, \ just to be sure. I tried using the full file path instead of the relative with the same results.
I then used a format converter to change one of the videos from .mp4 to .ogv with the same results.
What is really curious, is that I am pretty sure that it IS seeing the videos, because with the code as is posted above, the controls are semi-responsive. I can toggle between play and pause and drag the slider. When I drag the slider to the end, it shows the exact run-time of the video, but still no audio or video.
It just occured to me that jquery mobile could be messing it up, so I'll post this and run a test with pure html 5.
Thanks is advance for any info.
node-webkit only supports patent "free" codecs out of the box. You can however enable mp4/h264 support which is described here: Using MP3 & MP4 (H.264) using the video & audio tags..