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
   • Use FFmpeg
     • Windows
     • Linux
   • Use Amazon Elastic Transcoder
2. Stream videos using PDA shortcode
   • Secure HLS videos on Amazon S3

Requirements:

• PDA Protect Videos extension version 1.3 or greater
• Prevent Direct Access Gold version 3.0.0 or greater

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.

Windows

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 an Amazon 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

If you’re not hosting the HLS files on S3 bucket, skip the first 2 steps and go straight to step 3.

While you can upload your .ts and .m3u8 files to your own or any other hosting server and storage, it’s recommended to host them on Amazon S3 bucket so that you can keep the m3u8 file private, and so, enhance our file protection against most video/audio downloaders.

How to Make m3u8 file Private

1. Under your S3 bucket, locate and select your m3u8 file
2. Under its Permission tab, click on “Edit” and then uncheck “Read” option under Everyone (public access) to make m3u8 file private.

Secure HLS videos on Amazon S3

To best protect your videos against downloads without permission, we recommend you to store your videos on Amazon S3 bucket so that no one can access or even download them.

Our plugin will need your permission to access your S3 bucket and deliver the videos using pre-signed URLs. These signed URLs will automatically expire after a period of time.

Step 1: Configure S3 bucket

Once you’ve created an S3 bucket, navigate to Prevent Direct Access Gold > Videos under your WordPress 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.
• If you’re using both Protect Videos and S3 Integration extensions, you only need to configure the S3 bucket once on the S3 Integration’s Settings page.

Step 2: Make the m3u8 file private

While storing the HLS folder on the Amazon S3 bucket, you will need to make the m3u8 file private while keeping the rest (.ts and .key files) public.

To prevent most of the download tools from downloading your videos, we set the default expiration time of your m3u8 file to 5 seconds.

If your videos can’t play smoothly, you may want to increase the expiration time of videos using the expiry attribute (time in seconds). For example, the following shortcode set the expiry to 10 seconds.

[pwv_hls url="S3 link of your m3u8 file" expiry=10]

Step 3: Insert PDA Shortcode into your content

Insert the following shortcode into your content where you want users to play the HLS video.

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

You can also use the shortcode tool under our plugin’s Settings page to get the ready-to-use shortcode.