Sign Up for Free

RunKit +

Try any Node.js package right in your browser

This is a playground to test code. It runs a full Node.js environment and already has all of npm’s 400,000 packages pre-installed, including videojs-client with all npm packages installed. Try it out:

var videojsClient = require("videojs-client")

This service is provided by RunKit and is not affiliated with npm, Inc or the package authors.

videojs-client v1.2.25

Video.js is a web video player built from the ground up for an HTML5 world. It supports HTML5 and Flash video, as well as YouTube and Vimeo (through plugins). It supports video playback on desktops and mobile devices. This project was started mid 2010, and the player is now used on over 50,000 100,000 200,000 400,000 websites. Reference dependent videojs version update.@li.zhang

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
RunKit is a free, in-browser JavaScript dev environment for prototyping Node.js code, with every npm package installed. Sign up to share your code.
Sign Up for Free