ryanpatrickcook / videojs-wistia

Support Wistia source for Video.js

Video.js - Wistia Source Support

Allows you to use Wistia URL as source with Video.js.

Video.js 5 Example | Video.js 4 Example

How does it work?

Including the script vjs.wistia.js will add the Wistia as a tech. You just have to add it to your techOrder option. Wistia Javascript Player API docs.

Here is an example of how to use with Javascript events:

videojs('vid2', {
  "techOrder": ["wistia"],
  "sources": [{
    "type": "video/wistia",
    "src": "http://fast.wistia.com/embed/iframe/b0767e8ebb?version=v1&controlsVisibleOnLoad=false&playerColor=aae3d8"
  }]
}).ready(function() {
  this.on('pause', function() {
    document.body.style.backgroundColor = '#ffcccc';
    console.log("video.js - pause");
  });

  this.on('play', function() {
    document.body.style.backgroundColor = '#eafeea';
    console.log("video.js - play");
  });

  this.on('seeked', function() {
    console.log("video.js - seeked");
  });

  this.on('volumechange', function() {
    console.log("video.js - volumechange");
  });

  this.one('ended', function() {
    console.log("video.js - ended");
    this.src("https://home.wistia.com/medias/oefj398m6q?playerColor=ff0000");
    this.play();
  });
});

If you're using video.js 4 (use the video-js-4 branch) - Javascript events

videojs('videoId', {
  "techOrder": ["wistia"],
  "src": "http://fast.wistia.com/embed/iframe/b0767e8ebb"
}).ready(function() {
  this.on('pause', function() {
    console.log("video.js - pause");
  });

  this.on('play', function() {
    console.log("video.js - play");
  });

  this.on('seeked', function() {
    console.log("video.js - seeked");
  });

  this.on('volumechange', function() {
    console.log("video.js - volumechange");
  });
});

Supported URLs

http://fast.wistia.com/embed/iframe/:id

http://home.wistia.com/medias/:id

videojs-wistia's Issues

Hide Wistia controls?

Is it possible to hide the native Wistia controls and use only the videojs controls?

Not working on Video.js 5.10.4

Uncaught TypeError: Cannot read property 'extend' of undefined
VIDEOJS: ERROR: The "Wistia" tech is undefined. Skipped browser support check for that tech.

VIDEOJS: ERROR: (CODE:4 MEDIA_ERR_SRC_NOT_SUPPORTED) No compatible source was found for this media. i {code: 4, message: "No compatible source was found for this media."}code: 4message: "No compatible source was found for this media."proto: Objecte @ log.js:77h.error @ log.js:29b.error @ player.js:2244(anonymous function) @ player.js:1966e @ fn.js:35

Uncaught (in promise) DOMException: The play() request was interrupted by a call to pause().

Bower requires video.js 5.10

Any reason for not using the latest video.js?

Thanks