I have a website that have 6 videos from +500MB to +1GB i have uploaded them my other hosting which is not same as the website thinking it would not have lag. But it seems it has lag and its loading slow.
What solution do i have to host my videos in mp4 file so i can link them in html5 video tag?
I must link them in html4 video tag because i am hidding the video controls from user and i have made JavaScript buttons for (start & full screen).
Some solution for me?
anyone?
I won't write at length here but a lot of the delays I've seen is due to the video encoding. MP4 is a container and supports many encodings. Reference: https://www.w3.org/2008/WebVideo/Fragments/wiki/State_of_the_Art/Containers#:~:text=MP4%20can%20contain%20video%20and,TwinVQ%2C%20Vorbis%20or%20Apple%20Lossless.
Over and over folk find themselves unaware of the differences between encoding and containers. Since it's not my site I won't fix this but want to note that many encodings have the web browser load up the entire file before it plays. There are many tutorials about how to set up streaming from the server to the browser so I won't duplicate that here but want to write it's time to try other encodings. You might be able to avoid setting up a streaming server/service.
I am sorry but i didn't understanded you. Do you say i need to convert my mp4 file into different format?
Exactly what I hear when folk start learning about containers and encoding. MP4 is not a format, it's a container. Spend some time learning this so you can start trying other encodings. Also, sometimes folk jam 4K content in there and complain but hey, we don't need 4K for most things.
I actually read the link you posted and found a tool named "HandBrake" it compresses the video without losing the quality. I put a video with 860MB mp4 file. It shrink it down to 230MB and made it m4v file. Can i use this file to upload to my hosting and put it in <video> tag?
Try that. It's usually not the size at issue but the encoding. In short certain encodings can't stream. By stream I mean that the video player could begin playing the video once there's enough data to begin play. Some encodings have the video player downloading the entire file before play begins. This is not an area where I kept information of which encoding streams on which players since that's an exponential problem. Too many encodings, too many players so I would never try to build such a table.
Even so, give your new video file a whirl and if need be rename the extension to mp4 if the m4v doesn't fly. There are so many ways to encode for the web and also so many tutorials about encoding that I can't compete with those tutorials.
My goal here is to get you up and learning about containers and encoding so you can find a better combination to this issue. Even if the video player has to read the entire file, 230MB is going to get going faster than 860MB.
Why not put your video on youtube, and link to that inside a frame? Or are you worried that lots of other videos apart from yours will appear after it has played? Youtube solves the video size problem and the streaming problem for you.
There are other streaming platforms you can try as well, such as Vimeo. If you present a video that you store on paid hosting, you will run into data storage and data usage problems when you have more videos and more people viewing them.
Try googling services similar to Vimeo to see what is out there.
EDIT:
so I googled as I suggested above and found a review listing 25 Vimeo alternatives. Some are expensive, but I found 9 that were free before I got bored looking at all of them. Panopto, Wistia, Streamyard, Restream, Vidyard, Flowplayer, Adilo, Dailymotion, etc. Flowplayer seemed to offer a lot for free, as does Dailymotion. So instead of trying to reinvent the wheel, try using one of these established services. Then your problems with file size and format goes away.
@john_111 yes i found those too but i have custimized the html5 video so it looks like its playing on LIVE currently.
And i will not be able to customize the other players as this one
We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.
