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 using PDA shortcode
    1. Secure HLS videos

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

Refer to how to convert MP4 to HLS format using Amazon Elastic Transcoder.

2. Stream videos using 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.

Secure HLS videos

To get the highest protection from video piracy, we recommend you store your videos on Amazon S3 bucket and make the m3u8 file private. So no one can access or even download them. However, our plugin will need your permission to access your S3 bucket and deliver videos using pre-signed URLs. This kind of link will automatically expire after a period of time. By setting the expiration time too short, e.g. 5 seconds, we can prevent most of the download tools from downloading your videos.

Once creating an S3 bucket, go to your site and navigate to Prevent Direct Access Gold > Videos from your admin dashboard.

Switch to the Configuration tab and click on the “Configure” button to start connecting our plugin with your S3 bucket.

Please note that

  • Cloudfront configuration is NOT required.
  • While storing the HLS folder in the Amazon S3 bucket, you just need to protect the m3u8 file only and make the other (.ts and key files) public.
  • If you install both Protect Videos and S3 Integration extensions, you can configure S3 bucket once with S3 Integration.
Lasted updated on May 2, 2020