streaming

From IndieWeb
(Redirected from HLS)

This article is a stub. You can help the IndieWeb wiki by expanding it.


streaming is a method of (usually video or audio) content delivery where the user can start viewing or listening to media without downloading the entire file in advance, and can often pause or skip back/ahead as part of the UI.

  • Live streaming is different as the media is streamed as it is created, and sometimes also has typical streaming features such as pause or skip back/forward up to the “live” portion.

IndieWeb Examples

Silo Examples

How To

How to publish a video for streaming from your own website

Assuming you already have a video file created, here is how to turn it into a format for streaming. This assumes you'll want to publish an HLS format, a widely supported format (native support in Safari, Edge, Android, and support in other browsers via video.js). The overall idea is to splice up the video into short segments and publish a playlist that references all the segments. The resulting files can be hosted on a static web server, there is no server-side code needed for this.

First, you'll need to use a tool like Apple's mediafilesegmenter or Bento4 to produce the segments and playlist. Apple's tools are hard to find because they keep moving the URLs around, so blog posts and Stackoverflow posts that reference the URLs keep breaking. This link to a search result on Apple's developer website may work to turn up the downloads. Another option is using Bento4, an open source toolkit.

You can either publish a single video at one resolution and bitrate, or you can provide alternatives at different resolutions and bitrates so that your viewers have different quality options to play to save bandwidth. Creating these alternative formats is not something the media segmenter tools will do. Instead, you can export several versions from your video editor, or use a tool like Handbrake or ffmpeg to create the additional files. You can also include captions by generating a WebVTT file.

Using Bento4

We'll use Bento4 to create the playlist and segments for 3 different resolutions of a video by following the instructions on the HLS documentation page.

Download Bento4.

Prepare your media files by creating one or more versions of your video at the desired resolutions and bitrates, and captions in a .vtt file if you have them.

This command will slice up your videos and prepare the playlist.

mp4hls --output-dir=stream --master-playlist-name=stream.m3u8 video1.mp4 video2.mp4 video3.mp4

If you look in the resulting "stream" folder, you'll see the main playlist stream.m3u8, and if you open that in a text editor you'll see that it references all the different resolutions of your video you included.

Now you're ready to upload these files to a server.

Creating a Web Player

Some browsers will be able to play this video without any additional libraries by creating a video tag and pointing the source to the main playlist. For broader browser support, and to add some additional features, you can use a library like video.js.

Here is the bare minimum markup to set up HLS playback: 

<video controls crossorigin preload="auto" poster="poster.png" width="750" height="422" class="video-js vjs-big-play-centered" id="video">
  <source src="stream/stream.m3u8" type="application/x-mpegURL" />
  <track kind="captions" src="captions.vtt" srclang="en" label="English" default>
</video>

Make sure to change the paths to your poster image, m3u8 file, and caption file appropriately. If your browser supports HLS natively (Safari, Chrome on Android, etc), then this markup doesn't actually need any Javascript and it will work as is.

To enable HLS playback on browsers that don't have native support, you need to add a bit of Javascript to glue it together.

Download the latest video.js release, as well as the videojs-http-source-selector and videojs-contrib-quality-levels extensions. 

<link href="/assets/video-js-7.8.4/video-js.css" rel="stylesheet" />
<link href="/assets/videojs-http-source-selector-1.1.6/videojs-http-source-selector.css" rel="stylesheet" />
<script src="/assets/video-js-7.8.4/video.js"></script>
<script src="/assets/videojs-contrib-quality-levels/videojs-contrib-quality-levels.min.js"></script>
<script src="/assets/videojs-http-source-selector-1.1.6/videojs-http-source-selector.min.js"></script>
<script>
var player = videojs('video');
player.ready(function(){
  player.httpSourceSelector();
});
</script>


Brainstorming

Indieflix

Inspired by Netflix’s outage, brainstorming about what would an “Indieflix” look like, and how would it work.

An Indieflix viewer could start focus on indie content to start with, seed it with video#IndieWeb_Examples and then discover more via h-reviews of videos posted by those users. Then you can say, since you liked this video, watch what they liked, etc.


PeerTube

PeerTube is a free, decentralized and federated video platform source code.

Used by Blender Foundation due to Youtube block their videos.

LaraTube

An open-source Laravel PHP project as part of a course on Udemy. A reasonable GitHub implementation Udemy course

  • Uses FFMPEG
  • Uses PHP
  • Uses Laravel
  • Works with standard web-servers without additions
  • Not IndieWeb centric (could be after some tweaks)

> it’s a bit alarming how pretty much every time someone asks about setting up one’s own streaming server the answer is always “just use ffmpeg” but then the followup question of “okay, how?” never gets answered. via Fluffy

> Because I think a lot of them are cargo culting - tomasparks

Problems

  • Need lots of space and to be able to license content

See Also

Retrieved from "https://indieweb.org/wiki/index.php?title=streaming&oldid=76764"