Git Product home page Git Product logo

video.js's Introduction

Video.js logo

Build Status Coverage Status Greenkeeper badge Slack Status

NPM

Video.js is a web video player built from the ground up for an HTML5 world. It supports HTML5 video and Media Source Extensions, as well as other playback techs like 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 700,000 websites.

Table of Contents

Quick Start

Thanks to the awesome folks over at Fastly, there's a free, CDN hosted version of Video.js that anyone can use. Add these tags to your document's <head>:

<link href="//vjs.zencdn.net/8.3.0/video-js.min.css" rel="stylesheet">
<script src="//vjs.zencdn.net/8.3.0/video.min.js"></script>

For the latest version of video.js and URLs to use, check out the Getting Started page on our website.

Video.js version 7 (and newer) CDN builds do not send any data to Google Analytics.

In older versions of Video.js (6 and earlier), in the vjs.zencdn.net CDN-hosted versions we include a stripped down Google Analytics pixel that tracks a random sampling (currently 1%) of players loaded from the CDN. This allows us to see (roughly) what browsers are in use in the wild, along with other useful metrics such as OS and device. If you'd like to disable analytics, you can simply include the following global before including Video.js via the free CDN:

<script>window.HELP_IMPROVE_VIDEOJS = false;</script>

Alternatively, you can include Video.js by getting it from npm, downloading from GitHub releases or by including it via unpkg or another JavaScript CDN like CDNjs. These releases do not include Google Analytics tracking at all.

<!-- unpkg : use the latest version of Video.js -->
<link href="https://unpkg.com/video.js/dist/video-js.min.css" rel="stylesheet">
<script src="https://unpkg.com/video.js/dist/video.min.js"></script>

<!-- unpkg : use a specific version of Video.js (change the version numbers as necessary) -->
<link href="https://unpkg.com/[email protected]/dist/video-js.min.css" rel="stylesheet">
<script src="https://unpkg.com/[email protected]/dist/video.min.js"></script>

<!-- cdnjs : use a specific version of Video.js (change the version numbers as necessary) -->
<link href="https://cdnjs.cloudflare.com/ajax/libs/video.js/8.3.0/video-js.min.css" rel="stylesheet">
<script src="https://cdnjs.cloudflare.com/ajax/libs/video.js/8.3.0/video.min.js"></script>

Next, using Video.js 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 Video.js 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="https://videojs.com/html5-video-support/" target="_blank">
      supports HTML5 video
    </a>
  </p>
</video>

When the page loads, Video.js 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:

var player = videojs('my-player');

The videojs function also accepts an options object and a callback to be invoked when the player is ready:

var options = {};

var player = videojs('my-player', options, function onPlayerReady() {
  videojs.log('Your player is ready!');

  // In this context, `this` is the player that was created by Video.js.
  this.play();

  // How about an event listener?
  this.on('ended', function() {
    videojs.log('Awww...over so soon?!');
  });
});

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!

Contributing

Video.js is a free and open source library, and we appreciate any help you're willing to give - whether it's fixing bugs, improving documentation, or suggesting new features. Check out the contributing guide for more!

Video.js uses BrowserStack for compatibility testing.

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.

Video.js is licensed under the Apache License, Version 2.0.

video.js's People

Contributors

adrums86 avatar alex-barstow avatar amtins avatar bc-bbay avatar brandonocasey avatar dmlap avatar dzianis-dashkevich avatar exon avatar forbesjo avatar gesinger avatar gjanblaszczyk avatar gkatsev avatar greenkeeper[bot] avatar greenkeeperio-bot avatar hartman avatar heff avatar jrw95 avatar knabar avatar kocoten1992 avatar ldayananda avatar maysjtu avatar mente avatar mister-ben avatar misteroneill avatar mmcc avatar owenedwards avatar sundrique avatar thijstriemstra avatar tomjohnson916 avatar wseymour15 avatar

Stargazers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar

Watchers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar

video.js's Issues

Autoplay image hides video

Hello,

I can get the video to autoplay by adding 'autoplay' to the

and setting autoPlay='true' in flash vars like this:
<param name="flashvars" value='config={"clip":{"url":"video.mp4","autoPlay":true,"autoBuffering":true}}' />

The problem I'm having is that about half the time the video will start playing and then the background image will replace the video. I can still hear the audio so the video is still playing, but the only way to see it is to click the play button which pauses it and then click the play button again to watch it.

How can I disable the image substitution when I want it to autoplay.

Thanks,
Daniel

Firefox will not honor preload="none"

Firefox 3.6.6 will not honor preload="none" it loads the video automatically, while Safari does honor the preload="none".

However, if I remove the preload="none", Firefox will not preload, but Safari starts to preload.

Is this a bug?

Here is the code I am using:

Thanks!

Play button displays instead of pause button FF/Opera...

I have my video set to autoplay. In Safari and Chrome, the pause button is showing which is correct. In FF and Opera, it shows the play button, instead of the pause button. Any suggestions?

On a side note. Anything I can change in the code so player controls disappear after a few seconds. Right now, when the video autoplays, the player controls stay visible until I hover then remove cursor from video. It would be perfect if the controls would automatically disappear after 3 to 5 seconds of video playing.

Thanks ahead of time for any suggestions. Fantastic video player overall.

Tony

Controls persist when full-screen in Opera

If one enters full-screen mode in Opera (typically F11) and then selects full-window mode, the mouse pointer has nowhere to hover but over the video and thus the controls never go away.

Full page broken in Safari in 1.1.3

Full page is broken in Safari. nativeFullscreenOn isn't returning false when this.video.webkitEnterFullScreen throws an error. Adding a return false in the catch block fixes it:

nativeFullscreenOn: function(){
  if(typeof this.video.webkitEnterFullScreen == 'function') {
    // Seems to be broken in Chromium/Chrome
    if (!navigator.userAgent.match("Chrome")) {
      try {
        this.video.webkitEnterFullScreen();
      } catch (e) {
        if (e.code == 11) { this.errors.push(VideoJS.errorCodes.videoNotReady); }
        return false;
      }
      return true;
    }
  }
},

Error in video.js Line 29

Video controls are disabled before "this" is initialized. Should be swapped.

// Hide default controls
this.video.controls = false;

// Allow an ID string or an element
if (typeof element == 'string') {
this.video = document.getElementById(element);
} else {
this.video = element;
}

Support Captions

Supporting captions would make this project even more desirable. Loading from a standard captioning format like .srt or .adb.xml and displaying over the video via Javascript.

Volume control and fullscreen button don't work in QtWebKit

I'm trying to embed this player in a web page in QtWebKit and when I click on either of those buttons nothing happens. I've modified the javascript to display an alert on click, that never happens. Play button and location bar work just fine. If you tell me what platform you're testing on I can provide a test app to demonstrate the issue.

No second playback on Chromium 6.x

When playing the demos on videojs.com, the first playback works well. When trying to play the video again, the play button does not work any longer.

Browser: 6.0.492.0 (55833) Ubuntu 10.04

No Fullscreen IN Safari 5

I just tried to run the demo video on Safari 5 (on a Mac) and it would would not go to fullscreen.

Poster image not showing in IE

I did not see this issue in an other post, so pardon me if it already has been addressed. BTW - very elegant implementation. Works flawlessly on MAC. The only issue I have run into is that the poster image is not showing in IE at all. I have used FLOW PLAYER before and have not encountered this in stand alone usage. So, it seems something in the implementation within the videojs script has altered the FLOW PLAYER functionality. Its evident when visiting: http://videojs.com/ in IE.

Any suggestions? Is this something that is being worked on? Am I the only one seeing this? Other than this one issue the script seems to work flawlessly.

thanks,
Christopher

Universal glitch with multiple videos on same page

I'm surprised that I can find no mention of this issue anywhere, as it seems incredibly basic and common. The problem is that if you have multiple

It appears that multiple controls are created all in the same place on top of each other, not attached to the actual videos.

This is a pretty killer issue for me, as I very much need to display multiple videos on a page all with their proper controls. So far, I can only get one of them to actually have usable controls at a time, by specifically using the addVideos() function instead of setup().

It looks like setup should be going through all the video tags on the page, adding them to an array and then creating a videoJS instance for each but it's obviously not doing it for me. Checked in Chrome, Safari and Firefox. The iPad is even weirder as it overlays standard controls on the custom ones.

Problem shown here: http://teachoct.com/dev/zencoder/demo.html

Controls disappear after I started the video

Hello.

I'm using the latest version of Chrome with Win 7. If I start the "Disney's Ocean" vid on your website, the video starts to play, but the controls disappear and won't come bach when I hover over the video. I can click on the video to pause and restart it, but the controls won't return, even after the video is over. I have to refresh the page to geth them back.

Seems to work woth other browsers though.

tr

Missing license?

It looks like the source doesn't ship with a license. May I suggest the MIT?

Flash vs z-index

Had a problem with a dropdown rendring behind the flash fallback. adding:

param name="wmode" value="transparent"

to the html seems to fix this problem.

No video with iPad and Cache-Manifest

I found this issue while developing an offline web app for the iPad.

Even with an internet connection, if a cache-manifest is present, the video will play fine only on the first load. Afterward, the video object's currentSrc property returns "" and the video fails to play.

I managed to find a solution to this. Setting the src attribute on the video tag fixes the problem.

iPhone play button dissappears

Hi everyone,
I've gotten the player working on both my macbook and iphone, however, on the iPhone once the player is fully loaded the default, circular play button in the center of the poster image disappears. I can still play the video by tapping where the circular play button should be (but nowhere else on the image seems to register that I want to play the video). If I exit the video midway through it's playback the circular button is visible overtop of the thumbnail image on the website, and functions as expected. I like having the videoJS controls overlaid on the thumbnail and poster image on the iPhone, but would like to also have that default circular play button. On the macbook everything runs as expected and smoothly. Any suggestions on how to fix the iPhone problem?

Not on shared server - H264?

I have received an odd response by Infrenion hosting.

I tried to use your player, but it just doesnt work for my site. On contacting Infrenion, they seem to think that I cant use HTML5 on my hosting package (shared server) as this video code requires a H264 codec?

Are OGG and WEBM not opensource alternatives to H264?

What do you think the issue really is here?

Ipad fullscreen

Going full screen on the Ipad leaves the browser bar visible. Both in normal and landscape mode.

Default video controls are behind video-js' custom controls

If the default controls are used, they are not hidden by video-js. This can be prevented by adding one line to video.js.

Patch:
--- a/video.js
+++ b/video.js
@@ -40,6 +40,9 @@ var VideoJS = Class.extend({

     this.buildController();
     this.showController();
+    
+    // Hide default controls
+    this.video.controls = false;

     // Position & show controls when data is loaded
     this.video.addEventListener("loadeddata", this.onLoadedData.context(this), false);
--

Video not working on Android

I've tested the demos on your website but them don't work on Android (my version is 2.1).
It shows me only a static image.

No controls on hover. Not in Firfox, not in Chrome.

I can get the controls only by right clicking >show controls. They don't show up on hover. Once I enabled them they do show on hover. Is there a param to enable them by default? Am I missing something?
It seems to work fine on http://videojs.com/ both in firefox and chrome. Anyone else experiencing this?

Unable to access controls when 'full window' on iPad

When testing the videojs player on an iPad, and pressing the 'full screen' button the controls are not accessible and the only way to control the video is to 'zoom' the video using the reverse-pinch gesture, and then accessing the native iOS video controls.

Given this I would suggest that this could be fixed by either hiding the full-window button when on an iOS device (users can use the reverse-pinch gesture to go full display-sized without this) or listen for the touch events to hide/show the video controls.

.vjs-controls { user-select:none } ?

I've been caught a few times by a selection when that clearly wasnt what I wanted.
Text selection should be disabled within the controls element, I'd think.
Yah?

(webkit and moz prefixes, of course, too.)

Not on shared server - H264?

SORRY ACCIDENTALLY CLOSED THIS - SO RE-POSTED

I have received an odd response by Infrenion hosting.

I tried to use your player, but it just doesnt work for my site. On contacting Infrenion, they seem to think that I cant use HTML5 on my hosting package (shared server) as this video code requires a H264 codec?

Are OGG and WEBM not opensource alternatives to H264?

What do you think the issue really is here?


Comments heff 12 minutes ago
Do they not support hosting specific video types (MP4/h.264)? That seems weird.

OGG and WebM are open source alternatives, but some browsers (Safari specifically) don't support them, and only support H.264.

You might try these instructions from Video for Everybody:
Ensure your server is using the correct mime-types. Firefox will not play the OGG video if the mime-type is wrong. Place these lines in your .htaccess file to send the correct mime-types to browsers

AddType video/ogg .ogv
AddType video/mp4 .mp4
AddType video/webm .webm


Louizem 9 minutes ago
Thanks thats what I thought too.
Yes, already have that in the htaccess. It just doesnt work. The only thing I can think of is the hosting, but I dont think they understand html5 / opensource video.....

Only the Hulu skin seems to work

     <!-- Begin VideoJS -->
          <div class="hu-css video-js-box">

Vimeo and Youtube don't fire. Also it first loads the native controls and then applies the style.

  <video class="video-js" width="640" height="264" poster="http://video-js.zencoder.com/oceans-clip.png" controls preload>

Remove 'controls preload' when using a skin.

iPad 'VideoJS Skin Controls' vs 'Quicktime Controls'

When using VideoJS on an iPad, 2 control sets tend to appear (both the VideoJS skin controls, and the default quicktime player controls).

If you view the skins page on an iPad, it produces the same problem as I've been having.

However, if you view your homepage www.videojs.com on an iPad it doesn't have that problem.

After a long time debugging to figure out why the controls were appearing on my own project, and not on your homepage example at www.videojs.com ...
It appears that Google Analytics is stopping the Quicktime controls from appearing.

I have no idea why Google Analytics would interfere in this way, but it's doing the job, and will have to be a 'fix' for the project I'm working on.

Hopefully this will give you some guidance with where to fix this properly.

Regards,
Alan.

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    ๐Ÿ–– Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. ๐Ÿ“Š๐Ÿ“ˆ๐ŸŽ‰

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google โค๏ธ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.