What is Video JS ???
Video.js is an open source library for working with video on the web, also known as an HTML5 video player. I think , Video JS is the only and the best framework for HTML5 video player.
Read more : http://videojs.com/ .
But , now we will share how to create a brand logo in the video js. And we will using Plugin of Video js.
Spec :
v. VideoJS :Video JS 4 or 5.
Plugin : videojs-logobrandVideo.js is an open source library for working with video on the web, also known as an HTML5 video player. I think , Video JS is the only and the best framework for HTML5 video player.
Read more : http://videojs.com/ .
But , now we will share how to create a brand logo in the video js. And we will using Plugin of Video js.
Spec :
v. VideoJS :Video JS 4 or 5.
<!doctype html>
<html>
<head>
<title>Video.js logobrand example</title>
<link rel="stylesheet" href="libs/video-js/video-js.css">
<script src="libs/video-js/video.js"></script>
<link rel="stylesheet" href="src/videojs.logobrand.css">
<script src="src/videojs.logobrand.js"></script>
</head>
<body>
<video src="http://vjs.zencdn.net/v/oceans.mp4" class="video-js vjs-default-skin" data-setup="{}" controls width="580" height="320"></video>
<script>
// save a reference to the video element
video = document.querySelector('video'),
// save a reference to the video.js player for that element
player = videojs(video);
// initialize the plugin with some custom options:
player.logobrand({
image: "logo.png",
destination: "http://www.videojs.com/"
});
</script>
</style>
</body>
</html>
But , Script above best working on videojs v.4. ,and not work in VideoJs v.5 . How to fix in v.5 ???We will editing plugin videojs-logobrand.
Open videojs-logobrand.js and look row 18.
var settings = videojs.util.mergeOptions(defaults, options), player = this;
Change to
var settings = videojs.mergeOptions(defaults, options), player = this;
Done.
Download
1. Logobrand for Videojs4
2. Logobrand for Videojs5
