LIVE PREVIEWBUY FOR $20

Options

  • Video.js that’s open supply HTML5 & Flash video participant, in addition to YouTube and Vimeo (by way of plugins), used on over 200,000 web sites
  • Pores and skin with Tube Type
  • Retina Prepared & Totally Responsive
  • HTML5 & CSS3
  • Help videojs-logo / videojs-watermark
  • Help keyboard shortcuts:

    • – Up/down arrow or mouse wheel -> management quantity
    – Proper/left arrow -> search participant by 5s
    – M -> toggle mute
    – F or double click on -> toggle fullscreen
    – F or Esc -> exits full-screen mode
    – 0 -> restart video
    – 1-9 -> skip to a selected part of the video (e.g., 0 is 0%, 9 is 90% and 5 goes to the video midpoint)

  • Help and updates
  • Wishlist Help
  • Properly Documented

Embody the pores and skin on the web page

The bottom Video.js pores and skin is made utilizing HTML and CSS. Which means you may construct a customized pores and skin by merely profiting from the cascading side of CSS and overriding the types you’d like to alter.

<hyperlink rel="stylesheet" kind="textual content/css" href="./video-js-5.10.4/video-js.min.css></hyperlink>
<hyperlink rel="stylesheet" kind="textual content/css" href="./video-js/videojs-fuzzy.min.css></hyperlink>

<script kind="textual content/javascript" src="./video-js/video.js" ></script>

The principle class identify for all skin-specific types. To make your individual pores and skin,
substitute all occurrences of ‘vjs-default-skin’ with a brand new identify. Then add your new
pores and skin identify to your video tag as an alternative of the default pores and skin.

<video class="video-js vjs-big-play-centered">

Reference

  • VideoJS Participant Homepage
  • VideoJS Participant Documentation
  • Study extra about CSS Skinning Information
  • Study extra about Constructing VideoJS Skins
  • Create Customized VideoJS Participant
  • Icons font generator utilizing SVG recordsdata
  • PX to EM conversion made easy
  • On-line CSS Minifier/Compressor
  • VideoJS Supply Code
  • Methods to construct VideoJS from supply

Changelog

  • Help responsive on cell – 18 April 2020.
  • The launch of the Fuzzy Pores and skin Retina for VideoJS 7 – 23 November 2019.

Different Skins


Source