A video player written in 100% native JavaScript

Videop() is a Google Chrome JavaScript video player control built using only JavaScript/ECMAScript, with a playbar, video playback head, tracking, grabbing, and seeking via clicking on the playbar or grabbing the playhead with the mouse.

videop

To run videop, click on the link here or on the image above. The player will begin in its own page running a very fun video from Wistia, the most awesome video internet company that there is. To see statistics, which right now are sent as console messages, in Chrome select “View|Developer|Developer Tools” and select “All” to display all messages in the console on the right pane.

Current Testing State:

Videop() has been tested in Chrome, Version 47.0.2526.111 (64-bit), under MacOS v. 10.10.5. Minimal testing shows that it also works in Opera, Version 34.0.2036.25 also under MacOS 10.10.5. The control works in Firefox 43.0.4 “Funnelcake” but only after Firefox is *manually* resized. Otherwise the playbar paints quite below the video control, under Mac.

Statistics

Start and stop times of segments viewed are stored as the video is paused or stopped. Then total times viewed once, twice, etc. are calculated and passed to a Logger() class, which in this version writes to the console. Aggregate times are calculated whenever the user pauses the video –or every five seconds during play time.

Octocat

Source Code

Videop(), is intended to be attached in JavaScript to an hmtl5 video object and is a ‘class’ object implemented via closure for storage in function Videop(), and with member functions added to Videop()’s prototype.

Click on the Octocat on the right or follow the link for the source code here for the GitHub repo.

Comments are closed