Embedding video to the site

Image4io provides several formats for the video that are uploaded. You can embed videos by using mp4 and HLS formats as following tutorial.


We used a javascript video library called Video-js to demonstrate embedding videos to the website. Video-js is a good choice because its ease of use. Here is the code snippet to put mp4 video to page:

  <link href="https://vjs.zencdn.net/7.8.4/video-js.css" rel="stylesheet" />

  <!-- If you'd like to support IE8 (for Video.js versions prior to v7) -->
  <script src="https://vjs.zencdn.net/ie8/1.1.2/videojs-ie8.min.js"></script>

    <source src="MY_VIDEO.mp4" type="video/mp4" />
    <p class="vjs-no-js">
      To view this video please enable JavaScript, and consider upgrading to a
      web browser that
      <a href="https://videojs.com/html5-video-support/" target="_blank"
        >supports HTML5 video</a

  <script src="https://vjs.zencdn.net/7.8.4/video.js"></script>

You need to provide your video's URL in the place of "MY_VIDEO.mp4" above. You can obtain your mp4 video URL as following:

Video-js library can also be used to embed HLS videos to the page. Here is the example snippet from official documentation:


      <title>image4.io Video Preview Page via Video-js</title>
      <link href="https://cdnjs.cloudflare.com/ajax/libs/video.js/6.7.3/video-js.min.css" rel="stylesheet">
      <script src="https://cdnjs.cloudflare.com/ajax/libs/video.js/6.7.3/video.min.js"></script>

      <script src="./videojs-contrib-hls.min.js"></script>

      <div class="centered">
        <video id=example-video width=960 height=540 class="video-js vjs-default-skin" controls>
        <script src="video.js"></script>
        <script src="videojs.hls.min.js"></script>
        var player = videojs('example-video');


To run the code above, videojs-contrib-hls.min.js must be downloaded from the official repository and placed in the same folder with the code. And "MY_VIDEO.m3u8" must be replaced with the .m3u8 stream format of your video which can be obtained from the image4io console as below:

You can find the implementation of of above code in the iamge4io watch page which you can go with the button below.

For further options like adding a quality selector or customizing the UI of video elements, you can visit the Video-js documentation.