Miss any of our Open RFC calls?Watch the recordings here! »

videojs-client

1.2.25 • Public • Published

videojs-client - HTML5 Video Player

Build Status Coverage Status Slack Status

NPM

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

Install

npm i videojs-client

DownloadsWeekly Downloads

6

Version

1.2.25

License

ISC

Last publish

Collaborators

  • avatar