web host pro

Streaming video in the new age

Streaming video just got a lot easier with HTML5. Many scripts still do FFMPEG which we have installed and are ready to go. The advancements with HTML5  now allow us to simply just add a special code to our website and video will stream. This is done by modern browsers having the decoder built in.

This is faster and easier to install than steaming video has ever been.

As you might have noticed on our front page, we have a small video streaming behind the main text. This is done with HTML5.

The code is quite simple:

<p><code><video autoplay="autoplay" loop="loop" muted="" width="300" height=""><source src="video/video-name.mp4" type="video/mp4"><source src="video/video-name.webm" type="video/webm"><source src="video/video-name.ogv" type="video/ogg"></video></code></p>

We have auto-play, loop, and mute activated in the code.

Here it is in action:

There are even more options, first I want to explain why there are three video files.

MP4 – is the most common video to stream, if you only do one I suggest this one.
WebM – is slowly growing on MP4 and is used on mobile browsers.
OGG – is for Apple Macs and iPhones.

It’s highly recommended to use all three formats at this time.

Keeping it fast

Even with this great new technology, it will still load slowly if your videos are not compressed well. We found a great site to run your videos through to get good compression and each format. You can see the site here: Video Conversion

I suggest converting your video to WebM first, then converting that to MP4 and OGG to make all three.

Now that your videos are ready, you can play with your HTML5 streaming video code options. Here are the options available:

  • autoplay – autoplay – Specifies that the video will start playing as soon as it is ready
  • controls – controls – Specifies that video controls should be displayed (such as a play/pause button etc).
  • height – pixels – Sets the height of the video player
  • loop – loop – Specifies that the video will start over again, every time it is finished
  • muted – muted – Specifies that the audio output of the video should be muted
  • poster – URL – Specifies an image to be shown while the video is downloading, or until the user hits the play button
  • preload – auto – metadata none Specifies if and how the author thinks the video should be loaded when the page loads
  • src – URL – Specifies the URL of the video file
  • width – pixels – Sets the width of the video player

Streaming video on a web page can significantly enhance user engagement and content delivery. To incorporate video streaming into a web page, you have various options, ranging from simple HTML5 video embedding to utilizing third-party video hosting services. Here’s a guide on how to stream video on a web page through different methods:

1. Using HTML5 <video> Tag

The HTML5 <video> tag provides a straightforward way to embed video files directly into your web pages. This method is best for small to medium-sized videos that do not require adaptive streaming based on the user’s bandwidth.

htmlCopy code

<video controls> <source src="movie.mp4" type="video/mp4"> <source src="movie.ogg" type="video/ogg"> Your browser does not support the video tag. </video>

  • controls: This attribute adds video controls, like play, pause, and volume.
  • <source>: Specifies the video file to play and its format. Including multiple sources in different formats increases compatibility across various browsers.
  • Ensure the video files are hosted on the same server as your website or a CORS-enabled server to avoid cross-origin resource-sharing issues.

2. Using Video Hosting Platforms

For larger videos or a more sophisticated streaming experience (like adaptive streaming), it’s practical to use video hosting platforms such as YouTube, Vimeo, or Wistia. These platforms handle video delivery efficiently, ensuring optimal streaming quality based on the viewer’s internet speed.

Embedding a YouTube Video:

  1. Go to the YouTube video you want to embed.
  2. Click on the Share button below the video, then click on Embed.
  3. Copy the provided HTML code and paste it into your web page’s HTML where you want the video to appear.

htmlCopy code

<iframe width="560" height="315" src="https://www.youtube.com/embed/VIDEO_ID" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>

Replace VIDEO_ID with the actual ID of the YouTube video.

3. Using Cloud-Based Streaming Services

Cloud-based streaming services like Amazon S3 with CloudFront, Microsoft Azure, or Google Cloud Storage can provide a more scalable and reliable solution for hosting and streaming video content. These services often offer CDN (Content Delivery Network) capabilities, which ensure faster delivery of video content globally by caching the content in multiple locations around the world.

General Steps:

  1. Upload your video files to the cloud storage service.
  2. Configure the CDN if necessary.
  3. Use the provided URL to embed the video into your web page, either directly through the <video> tag or via a custom player.

4. Using a Video Player Library

For more control over the video streaming and player features, consider using a JavaScript video player library like Video.js, Plyr, or MediaElement.js. These libraries offer customizable controls, styles, and advanced features like subtitles, playback speed control, and more.

Example with Video.js:

First, include Video.js via CDN in your HTML:

htmlCopy code

<link href="https://unpkg.com/video.js/dist/video-js.css" rel="stylesheet"> <script src="https://unpkg.com/video.js/dist/video.js"></script>

Then, add your video element with the Video.js classes:

htmlCopy code

<video id="my-video" class="video-js" controls preload="auto" width="640" height="264"> <source src="MY_VIDEO.mp4" type='video/mp4'> <!-- Add additional video sources here --> Your browser does not support the video tag. </video>

And initialize Video.js in your JavaScript:

javascriptCopy code

var player = videojs('my-video'); ``