0.0.1 • Published 5 years ago

@lawchihon/videojs-dailymotion v0.0.1

Weekly downloads
1
License
MIT
Repository
github
Last release
5 years ago

Dailymotion Playback Technologyfor Video.js

Install

You can use bower (bower install @lawchihon/videojs-dailymotion), npm (npm install @lawchihon/videojs-dailymotion) or the source and build it using npm run build. Then, the only file you need is dist/Dailymotion.min.js.

Version Note

It only support v5 - v7

Example

<!DOCTYPE html>
<html>
<head>
  <link type="text/css" rel="stylesheet" href="../node_modules/video.js/dist/video-js.min.css" />
</head>
<body>
  <video
    id="vid1"
    class="video-js vjs-default-skin"
    controls
    autoplay
    width="640" height="264"
    data-setup='{ "techOrder": ["dailymotion"], "sources": [{ "type": "video/dailymotion", "src": "https://www.dailymotion.com/video/k3ZKw075Zoh6OtvWUNO"}] }'
  >
  </video>

  <script src="../node_modules/video.js/dist/video.min.js"></script>
  <script src="../dist/Dailymotion.min.js"></script>
</body>
</html>

See the examples folder for more

How does it work?

Including the script Dailymotion.min.js will add the Dailymotion as a tech. You just have to add it to your techOrder option. Then, you add the option src with your Dailymotion URL.

It supports:

Options

It supports every regular Video.js options. Additionally, you can change any Dailymotion parameter. Here is an example of setting the ui-highlight parameter to fff.

<video
  id="vid1"
  class="video-js vjs-default-skin"
  controls
  autoplay
  width="640" height="264"
  data-setup='{ "techOrder": ["dailymotion"], "sources": [{ "type": "video/dailymotion", "src": "https://www.dailymotion.com/video/x7t3la2"}], "dailymotion": { "ui-highlight": "fff" } }'
>
</video>

Dailymotion controls

Because controls is already a Video.js option, to use the Dailymotion controls, you must set the dmControls parameter.

<video
  id="vid1"
  class="video-js vjs-default-skin"
  controls
  autoplay
  width="640" height="264"
  data-setup='{ "techOrder": ["dailymotion"], "sources": [{ "type": "video/dailymotion", "src": "https://www.dailymotion.com/video/x7t3la2"}], "dailymotion": { "dmControls": true } }'
>
</video>

Custom Player Options

If you need to set any additional options on the Dailymotion player, you may do so with the customVars parameter:

<video
  id="vid1"
  class="video-js vjs-default-skin"
  controls
  autoplay
  width="640" height="264"
  data-setup='{ "techOrder": ["dailymotion"], "sources": [{ "type": "video/dailymotion", "src": "https://www.dailymotion.com/video/x7t3la2"}], "dailymotion": { "customVars": { "wmode": "transparent" } } }'
>
</video>

Special Thank You

Thanks to everyone contributed on videojs-youtube

License

MIT

videovideojsvideo.jsvjsDailymotiontech
@everything-registry/sub-chunk-537
0.0.1

5 years ago