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.
MP4:
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:
<head>
<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>
</head>
<body>
<video
id="my-video"
class="video-js"
controls
preload="auto"
width="640"
height="264"
data-setup="{}"
>
<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
>
</p>
</video>
<script src="https://vjs.zencdn.net/7.8.4/video.js"></script>
</body>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:
HLS (Recommended)
Video-js library can also be used to embed HLS videos to the page. Here is the example snippet from official documentation:
<html>
<head>
<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>
</head>
<body>
<div class="centered">
<video id=example-video width=960 height=540 class="video-js vjs-default-skin" controls>
<source
src="MY_VIDEO.m3u8"
type="application/x-mpegURL">
</video>
<script src="video.js"></script>
<script src="videojs.hls.min.js"></script>
<script>
var player = videojs('example-video');
player.play();
</script>
</div>
</body>
</html>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.