Video Player

Overview

aksVideoPlayer.js

Video Player

View the Demo on CodePen →

Getting Started

Compiled and production-ready code can be found in the dist directory.

1. Include aksVideoPlayer.min.js on your site.

Direct Download

You can download the files directly from GitHub.

<link type="text/css" rel="stylesheet" href="dist/aksVideoPlayer.min.css">
<script src="dist/aksVideoPlayer.min.js"></script>

CDN

<link type="text/css" rel="stylesheet" href="https://unpkg.com/[email protected]/dist/aksVideoPlayer.min.css">
<script src="https://unpkg.com/[email protected]/dist/aksVideoPlayer.min.js"></script>

<link type="text/css" rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/aksVideoPlayer.min.css">
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/aksVideoPlayer.min.js"></script>

jQuery

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>

NPM

npm i aksvideoplayer

Document aksVideoPlayer.js

<div id="video"></div>
$("#video").aksVideoPlayer({
  file: [
    {
      file: "videos/video-1080.mp4",
      label: "1080p"
    },
    {
      file: "videos/video-720.mp4",
      label: "720p"
    },
    {
      file: "videos/video-540.mp4",
      label: "540p"
    },
    {
      file: "videos/video-360.mp4",
      label: "360p"
    },
    {
      file: "videos/video-240.mp4",
      label: "240p"
    }
  ],
  width: 640,
  height: 360,
  poster: "videos/poster.webp",
});

Sample.

Captions

  captions: [
    {
      file: "videos/subtitle.en.vtt",
      label: "English",
      kind: "captions",
      srclang: "en"
    },
    {
      file: "videos/subtitle.fr.vtt",
      label: "Français",
      kind: "captions",
      srclang: "fr"
    },
    {
      file: "videos/subtitle.tr.vtt",
      label: "Türkçe",
      kind: "captions",
      srclang: "tr"
    },
    {
      file: "videos/subtitle.de.vtt",
      label: "Deutsche",
      kind: "captions",
      srclang: "de"
    }
  ],

Sample.

Advertising

Google Ima 3

<script src="https://imasdk.googleapis.com/js/sdkloader/ima3.js"></script>
  ads: [
    {
    type: "google",
    url: 'https://pubads.g.doubleclick.net/gampad/ads?sz=640x480&' +
    'iu=/124319096/external/single_ad_samples&ciu_szs=300x250&impl=s&gdfp_req=1&'+
    'env=vp&output=vast&unviewed_position_start=1&cust_params=' +
    'deployment%3Ddevsite%26sample_ct%3Dskippablelinear&correlator='
    },
    {
      type: "image",
      src: "videos/ads.png",
      width: 320,
      height: 50,
      link: "http://adsurl.com/",
      time: "00:20"
    },
    {
      type: "video",
      src: "videos/videoads.mp4",
      link: "http://adsurl.com/",
      time: "00:35",
      adstimer: "6"
    },
    {
      type: "video",
      src: "videos/videoads.mp4",
      link: "http://adsurl.com/",
      time: "01:35",
      adstimer: "6"
    },
    {
      type: "html",
      html : '<div class="class-name"><img src="" style=""/>Ads Code</div>',
      time: "00:10"
    }
  ],

Sample.

Context Menu

  contextMenu: [
    {
      type: "urlCopy",
      label: "Copy Video Url",
      url: "http://url.com/"
    },
    {
      type: "socialmedia",
      label: "Share on Social Media",
      socials: [
        {
          label: "Facebook",
          url: "",
          colorBg: "#0066ff",
          color: "white",
          icon:
            '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 10 20"><defs/><path d="M8.174 3.32H10V.14A23.66 23.66 0 007.34 0C4.709 0 2.906 1.656 2.906 4.7v2.8H0v3.555h2.905V20h3.56v-8.945h2.789L9.697 7.5H6.466V5.05c0-1.027.276-1.73 1.708-1.73z" fill-rule="evenodd"/></svg>'
        },
        {
          label: "Twitter",
          url: "",
          colorBg: "#0089ff",
          color: "white",
          icon:
            '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 16"><defs/><path d="M17.944 3.987c.013.175.013.35.013.526C17.957 9.85 13.833 16 6.294 16c-2.322 0-4.48-.662-6.294-1.813.33.038.647.05.99.05 1.916 0 3.68-.637 5.089-1.725-1.802-.037-3.313-1.2-3.833-2.8.254.038.508.063.774.063.368 0 .736-.05 1.079-.137-1.878-.376-3.287-2-3.287-3.963v-.05c.546.3 1.18.488 1.853.512A4.02 4.02 0 01.838 2.775c0-.75.203-1.438.558-2.038a11.71 11.71 0 008.452 4.225 4.493 4.493 0 01-.102-.924c0-2.226 1.828-4.038 4.1-4.038 1.18 0 2.245.487 2.994 1.275A8.145 8.145 0 0019.442.3a4.038 4.038 0 01-1.802 2.225A8.316 8.316 0 0020 1.9a8.74 8.74 0 01-2.056 2.087z" fill-rule="evenodd"/></svg>'
        }
      ]
    },
    {
      type: "iframe",
      label: "Copy Iframe Code",
      iframe: "&lt;iframe&gt;&lt;/iframe&gt;"
    }
  ],

Sample.

Attributes

          poster: "", // picture telling the video
          width: 640, // player width
          height: 360, // player height
          rewind: true, // video rewind button
          rewindValue: 10, // video rewind second
          forward: false, // video forward button
          forwardValue: 10, // video forward second
          preview: true, // previews of the video
          previewWidth: 140, // previews width
          previewHeight: 95, // previews height
          controller: true, // video controller on off
          autoplay: false, // video autoplay
          muted: true, // video muted
          volume: 1, // video volume start
          loop: false, // loop the video
          playbackRate: ["0.25", "0.5", "0.75", "1", "1.25", "1.5", "1.75", "2"], // playbackRate
          pictureinpicture: true, // to watch when scroll scrolls down
          // language
          playbackRateLabel: "Playing Speed",
          captionsLabel: "Subtitles",
          sourcesLabel: "Quality",
          playLabel: "Play",
          pauseLabel: "Pause",
          rewindLabel: "Rewind %s Seconds",
          forwardLabel: "Forward %s Seconds",
          settingsLabel: "Settings",
          fullScreenLabel: "Fullscreen",
          exitFullScreenLabel: "Exit Fullscreen",
          adsSkipLabel: "Skip Ad",
          closeLabel: "Close",
          pictureinpictureLabel: "Picture in Picture",

License

The code is available under the MIT License.

You might also like...

a video player framework aims to bring wonderful experience on browser

a video player framework aims to bring wonderful experience on browser

Chimee English | 中文 Introduction Chimee is a web video player created by the Qiwoo Team. It's based on the web video element. It supports multiple med

Dec 22, 2022

A high-performance, interactive and customizable video player control, built upon Reanimated v2 & GestureHandler v2

A high-performance, interactive and customizable video player control, built upon Reanimated v2 & GestureHandler v2

`JSThread` to `JSThread`, `UIThread` to `UIThread`. React Native Reanimated Expo Player 100% written in Typescript video player component, interaction

Jan 4, 2023

This is a simple web based media player for playing video and audio. Build with pure HTML, CSS and Javascript. No framework or library included.

Aim-Player This is a simple web based media player for playing video and audio. Build with pure HTML, CSS and Javascript. No framework or library incl

Jun 27, 2021

Video Player

aksVideoPlayer.js Video Player View the Demo on CodePen → Getting Started Compiled and production-ready code can be found in the dist directory. 1. In

Oct 22, 2021

A Node JS Express/Serverless demo application that creates a slideshow video using the Pexels image library and Shotstack video editing API.

Shotstack Pexels Slideshow Video Demo This project demonstrates how to use the Shotstack cloud video editing API to create a video using an HTML form

Dec 9, 2022

A Chrome extension to help you inspect Mp4 video content and find irregularities in video streams.

A Chrome extension to help you inspect Mp4 video content and find irregularities in video streams.

MP4Inspector A Chrome extension to help you inspect Mp4 video content and find irregularities in video streams. Installation In chrome navigate to chr

Nov 28, 2022

Movie focused HTML5 Player

Movie focused HTML5 Player

Movie focused HTML5 Player

Dec 29, 2022

Rule YouTube, Soundcloud and Vimeo player with one API

Polyplayer Polyplayer allows you to rule YouTube's, Soundcloud's and Vimeo's player using one API. Features Playing, pausing, stopping Seek to absolut

Sep 24, 2022

:clapper: An extensible media player for the web.

:clapper: An extensible media player for the web.

Huge changes in the latest version. See 0.4.0 version changelog for more information Clappr is an extensible media player for the web. Your architectu

Jan 7, 2023
Owner
Ahmet Aksungur
Software Developer
Ahmet Aksungur
Video.js - open source HTML5 & Flash video player

Video.js - HTML5 Video Player Video.js is a web video player built from the ground up for an HTML5 world. It supports HTML5 video and Media Source Ext

Video.js 34.8k Jan 5, 2023
Music-Player - Music player application built with HTML, CSS and vanilla JavaScript

Music-Player Music player application built with HTML, CSS and vanilla JavaScrip

Karthik Umashankar 1 Feb 10, 2022
An online stem player. Inspired by but not affiliated with YEEZY TECH X KANO Stem Player.

Stem Player Online An online stem player. Inspired by but not affiliated with YEEZY TECH X KANO Stem Player. https://stemplayeronline.com See the proj

Luke Weiler 23 Nov 13, 2022
The HTML5 video player for the web

Flowplayer website | demos | docs For the impatient Download Flowplayer Unzip Drop the folder under your server Minimal setup <!DOCTYPE html> <head>

Flowplayer 1.9k Dec 30, 2022
HTML5

One file. Any browser. Same UI. Author: John Dyer http://j.hn/ Website: http://mediaelementjs.com/ License: MIT Meaning: Use everywhere, keep copyrigh

MediaElement.js 8k Dec 27, 2022
HTML5

One file. Any browser. Same UI. Author: John Dyer http://j.hn/ Website: http://mediaelementjs.com/ License: MIT Meaning: Use everywhere, keep copyrigh

MediaElement.js 8k Jan 8, 2023
A web video player built for the HTML5 world using React library.

video-react Video.React is a web video player built from the ground up for an HTML5 world using React library. Installation Install video-react and pe

null 2.4k Jan 6, 2023
Modern browsers already had a vivid player for video

Modern browsers already had a vivid player for video. However, web developers and designers still want to custom their own style player for different situations. Sounds like web component will do a lot favor for this purpose. With <msc-ez-video /> support, customize control panel will become a piece of cake. <msc-ez-video /> adopts CSS custom properties, developers could style them as they want.

Paul 1 Dec 29, 2021
Custom full screen video player

Video Player Native video player in html View Demo · Report Bug · Request Feature About The Project This is a custom video player for the web built on

Oscar Castaneda ⬢ 5 Feb 3, 2022
Accessible HTML5 Video Player

Accessible HTML5 Video Player What is it? A lightweight HTML5 video player which includes support for captions and screen reader accessibility. For de

PayPal 2.4k Jan 5, 2023