#1
  1. No Profile Picture
    Contributing User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Jan 2013
    Posts
    35
    Rep Power
    5

    HTML5 / JS video player and popcorn.js


    Hi I'm looking for and HTML5 / javascript video player that allows me to add overlay like youtube annotations

    the player and annotations should be responsive

    not sure if anything already exist

    i did some research and found a suggestion for integrate popcorn.js with some HTML5 player
    looking into popcorn.js it doesn't seem under develop since a year or mode

    can i find a better alternative to popcorn?
    witch HTML5 player can i use with popcorn?
  2. #2
  3. Plays with fire
    Devshed Beginner (1000 - 1499 posts)

    Join Date
    Aug 2003
    Location
    Barsoom
    Posts
    1,133
    Rep Power
    143
    I've used Flowplayer in the past and it's been very nice. It allows for overlays, but I'm not sure if it will work exactly how you need. Worth a look, though.
    Be ashamed to die until you have won some victory for humanity. -- Horace Mann

    "...all men are created equal." -- US Declaration of Independence
  4. #3
  5. No Profile Picture
    Registered User
    Devshed Newbie (0 - 499 posts)

    Join Date
    May 2017
    Posts
    5
    Rep Power
    0
    I found an interesting blog post that can help you, it talks about some of the popular HTML5 video players available today. HTML5 Video Comparison | Cloudinary Blog

    The following video players are covered:

    VideoJS - a free and open-source HTML5 video player built with JavaScript and CSS and supports playback on desktops and mobile devices.
    JW Player - a video player that provides a lot of functionalities like 4K resolution, Adaptive bitrate streaming, Live streams, Monoscopic video support and more.
    J Player - HTML5 audio and video player for jQuery. Its basically a jQuery plugin.
    Flow Player - HTML5 video player that supports Adsense and VAST advertising, Video hosting, Subtitles. You can use Flowplayer in your application by downloading the software, unzipping it and linking the JS and CSS files like so:

    Code:
    <!DOCTYPE html>
    <head>
       <!-- flowplayer depends on jQuery 1.7.1+ (for now) -->
       <script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
    
       <!-- flowplayer.js -->
       <script type="text/javascript" src="flowplayer.min.js"></script>
    
       <!-- player styling -->
       <link rel="stylesheet" type="text/css" href="flowplayer/minimalist.css">
    
    </head>
    
    <body>
    
       <!-- player 1 -->
       <div class="flowplayer">
          <video src="my-video.mp4"></video>
       </div>
    
       <!-- player 2 -->
       <div class="flowplayer">
          <video>
             <source type="video/webm" src="my-video2.webm">
             <source type="video/mp4" src="my-video2.mp4">
          </video>
       </div>
    </body>
    Mediaelement.js - an HTML5 audio and video player that supports Streaming of HLS, M(PEG)-DASH, and RTMP content .

    More players that you can find there:

    Flare Video
    Projekktor
    Acorn Media Player
    Kaltura Video Player
    Accessible HTML5 Video Player
  6. #4
  7. No Profile Picture
    Registered User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Jul 2017
    Posts
    3
    Rep Power
    0
    Thats a list of some nice JavaScript Video libs!

IMN logo majestic logo threadwatch logo seochat tools logo