Home » WordPress File Protection » How to Set up WordPress HTTP Live Streaming (HLS) Video

Last updated: Updated on by Suzie

How to Set up WordPress HTTP Live Streaming (HLS) Video

In today’s noisy marketing landscape, what your company really needs is a great story that can move everyone. Besides written content, you should also use other visual factors like images and infographics for more visualization.

Let’s think of videos as the most outstanding visual approach to market your products. They can be indeed powerful in numerous ways such as education, entertainment, and influence. Videos help grab visitors’ attention and get them hooked. Over 7 out of 10 people will buy software or an app after watching a marketing video.

It’s simple to embed and play a video on your WordPress site to engage users. However, not all types of videos have similar requirements or bring the same value to your site. Some videos can be uploaded and hosted on your website while others require a third-party hosting platform.

Most WordPress site owners tend to use the method of HTTP live streaming video to display videos on their content. Have you ever heard about this efficient video playing solution?

To help you better understand and use an HTTP live streaming video, we’ll clearly define what it is, the roles of video streaming, and how to set it up with ease. Let’s hop in!

What is the HTTP live streaming (HLS) video?

Streaming delivers a video to users over the Internet continuously by a little bit at a time rather than sending the entire video. Instead of saving videos on your machine or website, you store them remotely.

HTTP, standing for Hypertext Transfer Protocol, is “an application layer protocol in which information is sent from a user’s web browser to the website they are visiting”.

HTTP live streaming (HLS) video refers to a popular video streaming protocol that breaks down a video into small pieces of downloadable HTTP files. This makes these HTTP files load more easily and smoothly. This method improves not only user experiences but also privacy.

HLS is a replacement for Adobe Flash, an outdated video streaming technology that is not currently supported by many browsers. Even worse than that, vulnerabilities created by Adobe Flash can grant hackers access to your site.

Roles of HTTP live streaming videos

There are numerous reasons convincing users to use HTTP live streaming instead of self-hosting to play videos.

First of all, HLS runs on HTTP which is supported by most Internet-connected devices. In other words, viewers using any type of browsers, from Firefox, Chrome, to Safari are able to watch your videos.

What’s more, your video quality can be auto-adjusted, increased, or decreased, depending on the network conditions without interrupting the playing process. You can also protect your videos against tools like IDM when using HLS.

It’s not recommended to self-host videos on your own WordPress site. As videos are much heavier than images or PDF files, it takes you a while to upload one. In addition, videos cause a slow loading website. The loading time of a page containing a video will increase by 4.8 times, from 3.6 seconds to 17.38s compared to a page with written content only. Consequently, it affects the user experience dramatically.

Moreover, WordPress doesn’t accept files larger than 100MB. You might get mad after waiting for more than 5 minutes to upload a video and then it says “fail to upload due to the file size”.

How to set up WordPress HTTP live streaming (HLS) HTML5 videos

As mentioned, when using the HLS protocol, your video will be divided into multiple small and short pieces called .ts files and delivered via the .m3u8 file. You can use the PDA plugin and its Protect WordPress Videos & Audios extension to stream videos. Before that, let’s go through the process of converting an MP4 video to the HLS format.

Converting MP4 videos to HLS format

FFmpeg proves the perfect solution to convert audios and videos. Follow these 5 steps to start converting videos using this platform.

  1. Running this command line to create a key and secure your video 
    openssl rand 16 > video.key
  2. Create a new file called video.key.info with the Text Editor and add these 2 lines: 
    video.key
video.key
  3. Save the script below as the 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
  4. Create an input folder keeping your desired videos, and an output folder to store the converted videos.
  5. Copy and paste all these files and folders to the same directory
  6. Run the following command line to convert the mp4 files to HLS format 
    bash ./script.sh ./input ./video.key.info ./video.key ./output

    Your output folder will look like this. Each folder will include a video.key, a .m3u8 and split .ts files.

    pda-protect-videos-hls-output-video-folder

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

Streaming videos using PDA and Protect WordPress Videos & Audios

You need to have the plugins installed and activated in order to use this feature. Then, insert the shortcode below to where you want to display the video on your website. Remember to replace the text “Input the URL of your m3u8 file here” with your own m3u8 video’s URL.

There is another option for you to auto-generate the shortcode. Simply head to the Videos section under the Prevent Direct Access Gold icon in your WordPress dashboard and copy the shortcode.

Make use of WordPress HTTP Live Streaming (HLS) videos

Self-hosted videos on WordPress websites cause certain problems. They might decrease your site speed and at the same time take a while to upload. You sometimes couldn’t upload them due to the file size issue.

That’s why WordPress HTTP Live Streaming (HLS) videos come in handy in this case. Your videos are stored in a third-party platform that doesn’t take your bandwidth.

You can also protect your HLS HTML5 videos using PDA Gold and Protect WordPress Videos & Audios extensions. Users are allowed to view only, and unable to download them.

If you have any questions about how to set up as well as protecting WordPress HTTP Live Streaming (HLS) videos, let us know in the comment section below.