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.
Related
i need with start button
I wrote it correctly but it doesn't work on the site.
<audio autoplay> <source src="file way" type="audio/mpeg"> </audio>
I encountered a very similar problem playing video. The folder path I provided as the "src" to the video file actually existed, but was outside the document root of the web application. Thus it was invisible and inaccessible.
When I changed the "src" to a folder within the document root, the webapp worked as expected.
Be sure src="path" points to a folder that exists somewhere within the document root of your webapp.
DocRoot is /Users/horace/Sites/VideoMash
Video files are in /Users/horace/Sites/VideoMash/videos
❌ <video src="/Users/horace/Sites/VideoMash/videos/xyz.mp4" ...>
✅ <video src="videos/xyz.mp4" ...>
Hopefully this addresses your problem.
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.
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 an application which needs to embed videos (mp4, HTML5). The catch is that these videos can be located anywhere on the server hosting my application and not just in the directory of the app. If that were the case, my code would look something like this:
<video preload="auto" controls>
<source src="assets/media/video.mp4" type="video/mp4">
</video>
In my situation, my videos can be living in any location such as C:/Users/media/video.mp4 which would make me do something like this instead:
<video preload="auto" controls>
<source src="C:/Users/media/video.mp4" type="video/mp4">
</video>
The problem I run into is that Chrome (and other browsers most likely) obviously block this sort of external access. My workaround for this has been fetching videos at the server level (Tomcat server), converting them to a byte array, and giving that to my HTML. My Angular code sanitizes the byte array and then serves it to my HTML.
Angular:
this.http.get(url).subscribe(data => {
this.mediaSrc = this.sanitizer.bypassSecurityTrustResourceUrl(data);
});
HTML:
<video preload="auto" controls width="75%" height="50%">
<source [src]="mediaSrc" type="video/mp4">
</video>
This strategy works some of the time. However, every so often my video completely stops working and doesn't display in Chrome. This only happens some of the time and seems to be completely random. Almost as if chrome runs out of memory and or blocks the video if it doesn't like it. Loading the page in a new tab however completely fixes the problem.
My question: is there a better way to deliver video from the server level or is there something I can fix with my current implementation so that I don't run into the issue mentioned above? I would love to go into my issue more but I really can't put my finger on what is causing this issue to randomly occur and only on a given tab of a given browser.
Video not working was fixed by using .webm videos on Chrome instead of mp4.
I have a simple html 5 audio tag (below) on a page in a password protected directory.
The directory is protected by HTTP Basic authentication.
It was working fine on iOS7, on Safari. Now when I click on the Play button, nothing happens.
On other directories that are not password protected, it still works fine.
<audio controls>
<source src="audio/01-10r.mp3" type="audio/mp3">
<source src="audio/01-10r.ogg" type="audio/ogg">
<source src="audio/01-10r.wav" type="audio/wav">
</audio>
OK, just a hunch here but if its working for you in other directories I would say check your source from which your loading the file. If it's working in one directory and not the other I'd say its not loading the file correctly using the "src" source you have set. But if you want to post more details about your structure I don't mind looking over it further.
According to W3 here's the browsers it supports