CODEWITHSUNDEEP
javascriptphphtmlvideostream
Ivan Jerkovic
Ivan Jerkovic

Reputation: 11

How to stream(segment) mp4 video on webpage

So i use free hosting, I have few videos on my server, everything works except videos need about 10-20 sec to load and THEN start playing so i want to use streaming. Problem is i dont know that field and hosting doesnt support node.js but php 7 i think.

Tried using video.js with hls but i have no idea how to use it, i didnt find any reasonable or good tutorial online.

so ANY help would be great, what to focus on, links to some examples, quite a newbie so detailed tutorial would help.

this is in html:

<link href="https://vjs.zencdn.net/7.5.5/video-js.css" rel="stylesheet" />

<div class="video">
    <video id="video" class="video-js" width="1024" height="576" type="video/mp4" src="videos/merci.mp4" autoplay controls data-setup=""></video>
</div>
<span id="naziv">test text</span>


<script src="https://vjs.zencdn.net/7.5.5/video.js"></script>

and i have this in my .js

document.getElementById('video_html5_api').src = "videos/roses.mp4";

there are other parts of course but video is selected randomly with random integer and then switch statement, and this all works. But dont think this is much of use for my question since i have no idea where to go or start. I know how it should work with segmenting video in small chunks but have no idea how to do it.

Upvotes: 1

Views: 4584

Answers (3)

Plush
Plush

Reputation: 1

My first .mp4 video wouldn't play until it downloaded fully
I tried another one and it started playing immediatelly (streaming)
So it depends on .mp4 video would it stream or not

Upvotes: 0

TimHayes
TimHayes

Reputation: 3724

Given what you said, this may be too technical for you. But if you want to stream quality video on a simple http server, you could try using MPEG-DASH. This would involve two steps:

  1. Encoding your video into an MPEG-DASH format. This will provide you with several streams of varying quality. These streams will be adaptively downloaded by your users as the video plays... think YouTube.
  2. Adding some extra code to your page to support this in the browser. I'd suggest checking out the DASH IF Reference Client.

I know this is probably not enough information to go on, but I can probably follow-up with answers if you are interested.

Upvotes: 1

Brad
Brad

Reputation: 163242

You don't need anything special for this. A normal video tag will do:

<video src="videos/roses.mp4"></video>

However, you're going to want to make sure the moov atom in your MP4 file is at the beginning. To do this, you can use FFmpeg:

ffmpeg -i roses.mp4 -movflags faststart -codec copy roses-optimized.mp4

I think you'll find that this will improve the situation greatly.

Upvotes: 1

Related Questions