I'm trying to get a few videos to play on a webpage using Github pages, I've uploaded my video files to my repo but the videos aren't loading when I open the webpage, but they work when I run my .html files locally. Here's a code snippet of what I have:
<video width="1280" height="720" controls autoplay muted loop>
<source src="videos/WebIntroG.mp4" type="video/mp4">
Your browser does not support the video tag.
</video>
I've also tried this:
<video width="1280" height="720" controls autoplay muted loop>
<source src="https://michael1410.github.io/RobotGoon/videos/WebIntroG.mp4" type="video/mp4">
Your browser does not support the video tag.
</video>
Not sure if this matters but my video files are stored with git-lfs, they were over 50MB. Thanks.
Edit: So I've uploaded a smaller video file, under 25 MB, and it worked. So
I'm not sure gitpages will load .mp4 files larger than 50MB stored
using git-lfs.
Okay so the solution was posted at MP4 file stored with git lfs not playing in Github Pages by VonC. For .mp4 files stored with git-lfs use this:
https://media.githubusercontent.com/media/_Username_/_Project_/_Branch_/_Path_to_file_
Edit: Just a heads up, there's a storage and bandwidth limit for git-lfs of
1GB a month and it cost 5$ to buy more (you get 50 GB for 5$).
Along with 'autoplay', 'muted' and 'loop' try adding 'playsinline'. It worked for me.
Related
I have an index.html file that has a <video> element (stored in Git LFS) set up as a background, however GitHub pages recently stopped loading it - it did work just a few weeks ago. There are also no issues in the console.
On the local server it works as expected in any browser, also all changes were pushed to git.
Has anyone run into a similar issue and would know how to fix it?
<!-- The video -->
<video id="background-video" autoplay muted loop playsinline >
<source src="assets/animation/star_burst.mp4" type="video/mp4">
<source src="assets/animation/star_burst.mov" type="video/mov">
<source src="assets/animation/star_burst.mp4" type="video/webm">
</video>
Link to the file in case that helps.
Thank you
Your file was working a few weeks ago but is now moved to their Git Large File Storage which means that assets/animation/star_burst.mp4 is now a text file pointing to the storage location.
Try to specify direct access link. Something like https://media.githubusercontent.com/media/AnnaxT/AnnaxT.github.io/main/assets/animation/star_burst.mp4.
You can get it by clicking on "view raw" button on https://github.com/AnnaxT/AnnaxT.github.io/blob/main/assets/animation/star_burst.mp4
Or just upload less larger file.
I am adding basic video .mp4 from my Windows 10 laptop in HTML but it doesn't pick up the video at all. I tried to open in any browser it doesn't open.
I am reproducing the relevant parts of your code here for explanation purposes.
This is the correct HTML markup to include videos:
<video controls>
<source src="/video/example.mp4" type="video/mp4"> // on your server, is your file 'example.mp4' located at /video/example.mp4 ?
<source src="/video/example.webm" type="video/webm"> // on your server, is your file 'example.webm' located at /video/example.webm?
</video>
I suspect that you are possibly not using the correct filepath for your video files.
As a test, try replacing the content in the src attribute with a video from an online source.
So your code will look like this now
<video controls>
<source src="https://file-examples-com.github.io/uploads/2017/04/file_example_MP4_480_1_5MG.mp4" type="video/mp4">
</video>
The example video should be displayed on your page now.
So double check the path to the video files and make sure it is correct, because other than that the code is OK. (added / to the beginning of the filepath to refer to your root directory.) If your video files are located in the root directory, then use src="example.mp4
You can find more info on the video tag here: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/video
I have this video tag:
<video autoplay id="Video2">
<source src="http://myurl/firstanimation01.mp4" type="video/mp4">
<source src="http://myurl/firstanimation01.ogg" type="video/ogg">
</video>
What I would like to achieve is with jQuery or some other approach download enough content from the video before it starts to load. On some slow connections we get complaints from customers that the video is lagging, and there are often moments when the customers get stuck because of that.
What approach is recommended for these issues? Should I download whole video locally, set the path dynamically in jQuery and once downloaded start the video?
Some other approach for progressive loading?
I recommend trying the preload HTML5 attribute setting.
<video preload = auto>
I agree with Mitchell's suggestion, but I would suggest trying preload="metadata" first.
I would also suggest providing a link for the users to download the video themselves if they wish to.
When inserting a video in a website using a relative location its rather simple:
<source src="videos/video.mp4" type="video/mp4"/>
However i need to insert a video file from a completely different directory.
Like "C:\Some\Folder\onthedrive\videos"
But the project is in: "C:\XAMPP\htdocs\projectname"
I have also tried these things:
<source src="file://C:\Some\Folder\onthedrive\videos\video.mp4" type="video/mp4"/>
<source src="file://C:/Some/Folder/onthedrive/videos/video.mp4" type="video/mp4"/>
What can I do to fix this?
EDIT:
<source src="file://C:\Some\Folder\onthedrive\videos\video.mp4" type="video/mp4"/>
Actually worked, the webserver and browser recognised it, but due to security one of them decided not to load the file.
Chrome: 'Not allowed to load local resource'.
You have to change "file://" to "file:///".
Why three slashes?
"file:///C:/etc" is a shortcut for "file://localhost/C:/etc"
you can find it here: file URI scheme
EDIT:
I downloaded the video that w3schools is using in there example and my code looks like this
<video width="400" controls>
<source src="file:///C:\Users\Gebruiker\Downloads\mov_bbb.mp4" type="video/mp4">
Your browser does not support HTML5 video.
</video>
Make sure that you change the path to the url. So that it is matching with your file tree
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>