How to Set Up WordPress HTTP Live Streaming (HLS) HTML5 Videos

HTTP Live Streaming (HLS) is a new technology developed by Apple allowing delivering videos more easily and smoothly. It improves not only user experiences but also privacy. Your videos will be split into multiple small and short pieces (.ts files) and delivered via the .m3u8 file.

In this article, we will show you how to convert MP4 videos to HLS format and stream it with PDA Protect Videos extension.

  1. Convert MP4 videos to HLS format
    1. Use FFmpeg 
    2. Use Amazon Elastic Transcoder
  2. Stream videos via PDA shortcode

Requirements:

1. Convert MP4 videos to HLS format

Method 1: Use FFmpeg

FFmpeg is known as the best free solution to convert audios and videos. It supports Linux, macOS as well as Windows system. In the scope of this article, we will guide you on how to convert videos in Linux.

Step 1: Create a key to protect your videos by running the command line below:

openssl rand 16 > video.key

Step 2: Use Text Editor to create a new file named video.key.info, then insert 2 following lines:

video.key
video.key

Step 3: Save the script below as file named script.sh

#!/bin/sh
DIR=$1
DIR_KEY_INFO=$2
DIR_KEY=$3
OUTPUT=$4
echo $DIR
# List all mp4 files on folder
MP4_DIRS=$(find $DIR -type f | grep -E "\.mp4$")
mkdir -p $OUTPUT
for addr in $MP4_DIRS
do
FILE=$(basename $addr .mp4)
mkdir -p $OUTPUT/$FILE
cp $DIR_KEY $OUTPUT/$FILE/
ffmpeg -i $addr -codec: copy -start_number 0 -hls_time 20 -hls_list_size 0 -hls_key_info_file $DIR_KEY_INFO -f hls $OUTPUT/$FILE/$FILE.m3u8
done

Step 4: Create an input folder storing the videos you want to convert, and an output folder storing converted videos.

Step 5: Copy all these files and folders to the same directory.

Step 6: Run the following command line to convert the mp4 files to HLS format:

bash ./script.sh ./input ./video.key.info ./video.key ./output

Once done, your output folder will be something like below:

Each folder named after your mp4 file should include a video.key, a .m3u8 and split .ts files.

Step 7: Upload the whole folder to your hosting server or S3 bucket, then go to embed videos in content via shortcode.

Method 2: Use Amazon Elastic Transcoder

While FFmpeg is free and easy to use, it isn’t an ideal method if you have a lot of videos. To save time, you should consider using Amazon Elastic Transcoder which converts the media files and stores them on the S3 bucket automatically. You need to set up it for the first time only.

In order to use Elastic Transcoder,  you need an AWS account and have an Amazon S3 bucket to store your input and output videos. You can also use the different buckets for this purpose. For example,

  • an input bucket (e.g. named input.protected-videos) to which you upload the video files you want to transcode
  • an output bucket (e.g. named output.protected-videos) to receive the transcoded vides

Step 1: Log in to your AWS account and navigate to Elastic Transcoder console

Step 2: Click on “Create a new Pipeline” button to create a pipeline with the following pieces of information:

  • Pipeline Name
  • Input Bucket
  • Output Bucket
  • IAM Role: If you choose to Create console default role, Elastic_Transcoder_Default_Role will be created automatically.

You can leave other options as default values.

Step 3: Create a job to transcode your protected video into HLS format.

2. Stream videos via PDA shortcode

Insert the following shortcode to play your m3u8 video on your website:

[pwv_hls url="Input the URL of your m3u8 file here" width="512" height="308"]

You can also use our auto-generate shortcode tool under the plugin’s settings page.

Lasted updated on February 24, 2020