videojs-client v1.2.25
videojs-client - HTML5 Video Player
Table of Contents
Quick Start
Thanks to the awesome folks over at Fastly, there's a free, CDN hosted version of videojs-client that anyone can use. Add these tags to your document's <head>:
<link href="//vjs.zencdn.net/5.19/video-js.min.css" rel="stylesheet">For the latest version of videojs-client and URLs to use, check out the Getting Started page on our website.
Next, using videojs-client is as simple as creating a <video> element, but with an additional data-setup attribute. At a minimum, this attribute must have a value of '{}', but it can include any videojs-client options - just make sure it contains valid JSON!
<video
id="my-player"
class="video-js"
controls
preload="auto"
poster="//vjs.zencdn.net/v/oceans.png"
data-setup='{}'>
<source src="//vjs.zencdn.net/v/oceans.mp4" type="video/mp4"></source>
<source src="//vjs.zencdn.net/v/oceans.webm" type="video/webm"></source>
<source src="//vjs.zencdn.net/v/oceans.ogv" type="video/ogg"></source>
<p class="vjs-no-js">
To view this video please enable JavaScript, and consider upgrading to a
web browser that
<a href="http://videojs.com/html5-video-support/" target="_blank">
supports HTML5 video
</a>
</p>
</video>When the page loads, videojs-client will find this element and automatically setup a player in its place.
If you don't want to use automatic setup, you can leave off the data-setup attribute and initialize a <video> element manually using the videojs function:
require('videojs-client/style/video.less');
var videojs = require('videojs-client');
//fix videojs switch can not reset the video problem
//Toggle video back and forth
var sources = Object.assign({
video: [
{
src:"https://www.youtube.com/watch?v=yvpLS6F7t0w",
type: 'video/youtube'
},{
src: 'http://vjs.zencdn.net/v/oceans.mp4',
type: 'video/mp4'
}
]
},sources);
videojs(vid, {
controls:true,
youtube:true,
sourceOrder: true, //Direct support for playback YouTube playback
loop:true,
flash: {
swf: yourswfurl
},
sources: sources.video
}).ready(function() {
var vm = this;
setTimeout(function() {
vm.play();
}, 500);
});If you're ready to dive in, the Getting Started page and documentation are the best places to go for more information. If you get stuck, head over to our Slack channel!
Code of Conduct
Please note that this project is released with a Contributor Code of Conduct. By participating in this project you agree to abide by its terms.
License
videojs-client is licensed under the Apache License, Version 2.0.
Update
- fix videojs switch can not reset the video problem
- support YouTube embedded video playback
- support the use of the latest video.js NPM dependency pack