pxvideo_rails 0.0.1

checksums.yaml

@@ -0,0 +1,7 @@
+---
+SHA1:
+  metadata.gz: 48ec31892cfccac422575bb7c9310f849ca47ff1
+  data.tar.gz: 79cc37782b63f79a7fa8d1bd438d80212890b747
+SHA512:
+  metadata.gz: 6a68c34b90f23e08ff4053784ddbac2179c58517968d1be88b74f6696739225fa6fca6764e69f44f02f33ec352381c66a1f83f381186c11e3071e294ddc98d7f
+  data.tar.gz: 410a4e0ee09cccc1a08a7054f3f9ff8d1d8ce93efbf3a0127b51c5b00bd670291719e2ae3832c98a7f80cd85b7feebc000ef9655dc8fa0c52f59ec8f69868233

data/.gitignore

@@ -0,0 +1,4 @@
+*.gem
+.bundle
+Gemfile.lock
+pkg/*

data/Rakefile

@@ -0,0 +1,8 @@
+require 'rake/testtask'
+
+Rake::TestTask.new do |t|
+  t.libs << 'test'
+end
+
+desc "Run tests"
+task :default => :test

data/Readme.md

@@ -0,0 +1,64 @@
+# PX-Video for Asset Pipeline
+
+html5 video plugin for rails
+
+## Installation
+
+Gemfile
+
+```ruby
+gem 'pxvideo_rails'
+```
+
+Add the resources to your application.js file
+
+```coffeescript
+# app/assets/javascripts/application.js
+//= require px-video
+```
+
+And that resource to application.css file
+
+```sass
+/*
+*= require px-video
+*/
+```
+
+And to assets.rb add this line
+
+```ruby
+# config/initializers/assets.rb
+Rails.application.config.assets.precompile += %w( px-video-sprite.png )
+```
+
+## Usage
+
+```erb
+<%= pxvideo_rails
+sources: { mp4: "https://www.paypalobjects.com/webstatic/mktg/videos/PayPal_AustinSMB_baseline.mp4" } %>
+```
+
+### Properties
+
+```erb
+controls: true,
+setup: "{}",
+width: "640",
+height: "480",
+captions: {en: "https://exampledomain.org/media/captions_PayPal_Austin_en.vtt"},
+sources: { mp4: "https://www.paypalobjects.com/webstatic/mktg/videos/PayPal_AustinSMB_baseline.mp4" },
+poster: "https://exampledomain.org/media/poster_PayPal_Austin2.jpg"
+```
+
+
+## Based by Accessible HTML5 Video Player
+
+### Authors
+- Dennis Lembree, primary developer || [https://github.com/weboverhauls](https://github.com/weboverhauls) || [@dennisl](https://twitter.com/dennisl)
+- Victor Tsaran, consultation and testing || [https://github.com/vick08](https://github.com/vick08) || [@vick08](https://twitter.com/vick08)
+- Jason Gabriele, consultation
+- Tim Resudek, design
+
+### Copyright and License
+Copyright 2014, eBay Software Foundation under [the BSD license](LICENSE.md).

data/app/views/pxvideo_rails/_pxvideo_rails.html.erb

@@ -0,0 +1,51 @@
+<div class="px-video-container" id="myvid">
+	<div class="px-video-img-captions-container">
+		<div class="px-video-captions hide" aria-hidden="true"></div>
+		<video
+			id="<%=options[:id]%>"
+			<%= "controls" if !!options[:controls] %>
+			width="<%=options[:width]%>"
+			height="<%=options[:height]%>"
+			poster="<%=options[:poster]%>"
+			preload="<%=options[:preload]%>"
+			data-setup="<%= options[:setup] %>"
+		>
+			<!-- source files -->
+			<% if options[:sources] %>
+				<%- options[:sources].each do |type, source| %>
+					<source src="<%= source %>" type='video/<%= type %>' />
+				<%- end %>
+			<%- end %>
+			
+			<!-- text track file -->
+			<% if options[:captions] %>
+				<%- options[:captions].each do |lang, caption| %>
+					<track kind="captions" src="<%= caption %>" srclang="<%= lang %>" label="<%= lang %>" />
+				<%- end %>
+			<%- end %>
+			
+			<!-- fallback for browsers that don't support the video element -->
+			<div>
+				<% if options[:sources] %>
+					<%- options[:sources].each do |type, source| %>
+						<a href="<%= source %>">
+							<img src="<%=options[:poster]%>" width="<%=options[:width]%>" height="<%=options[:height]%>" alt="download video" />
+						</a>
+					<%- end %>
+				<%- end %>
+				
+			</div>
+		</video>
+	</div><!-- end container for captions and video -->
+	<div class="px-video-controls"></div>
+</div><!-- end video container -->
+
+<script>
+	// Initialize
+	new InitPxVideo({
+	    "videoId": "myvid",
+	    "captionsOnDefault": true,
+	    "seekInterval": 20,
+	    "debug": true
+	});
+</script>

data/lib/pxvideo_rails.rb

@@ -0,0 +1,2 @@
+require 'pxvideo_rails/railtie'
+require 'pxvideo_rails/engine'

data/lib/pxvideo_rails/engine.rb

@@ -0,0 +1,6 @@
+module PxvideoRails
+  module Rails
+    class Engine < ::Rails::Engine
+    end
+  end
+end

data/lib/pxvideo_rails/railtie.rb

@@ -0,0 +1,9 @@
+require 'pxvideo_rails/view_helpers'
+
+module PxvideoRails
+  class Railtie < Rails::Railtie
+    initializer "pxvideo_rails.view_helpers" do
+      ActionView::Base.send(:include, ViewHelpers)
+    end
+  end
+end

data/lib/pxvideo_rails/view_helpers.rb

@@ -0,0 +1,15 @@
+module PxvideoRails
+  module ViewHelpers
+    def pxvideo_rails(*options, &blk)
+      default_options = {
+        controls: true,
+        setup: "{}",
+        preload: "auto",
+        width: 640,
+        height: 480
+      }
+      options = default_options.merge(options.extract_options!)
+      render partial: 'pxvideo_rails/pxvideo_rails', locals: { options: options }, &blk
+    end
+  end
+end

data/pxvideo_rails.gemspec

@@ -0,0 +1,15 @@
+Gem::Specification.new do |s|
+  s.name        = 'pxvideo_rails'
+  s.version     = '0.0.1'
+  s.date        = '2014-09-15'
+  s.summary     = "%q{Pxvideo html5 video plugin}"
+  s.description = "%q{HTML5 PxVideo plugin}"
+  s.authors     = ["Alexandr Kardakov"]
+  s.email       = 'razielsun@gmail.com'
+  s.homepage    = ''
+
+  s.files         = `git ls-files`.split("\n")
+  s.test_files    = `git ls-files -- {test,spec,features}/*`.split("\n")
+  s.executables   = `git ls-files -- bin/*`.split("\n").map{ |f| File.basename(f) }
+  s.require_paths = ["lib"]
+end

data/vendor/assets/LICENSE.md

@@ -0,0 +1,27 @@
+Copyright (c) 2014, eBay Software Foundation
+All rights reserved.
+
+Redistribution and use in source and binary forms, with or without modification,
+are permitted provided that the following conditions are met:
+
+* Redistributions of source code must retain the above copyright notice, this
+  list of conditions and the following disclaimer.
+
+* Redistributions in binary form must reproduce the above copyright notice, this
+  list of conditions and the following disclaimer in the documentation and/or
+  other materials provided with the distribution.
+
+* Neither the name of the eBay nor the names of its
+  subsidiaries or affiliates may be used to endorse or promote products derived from
+  this software without specific prior written permission.
+
+THIS SOFTWARE IS PROVIDED BY THE COPYRIGHT HOLDERS AND CONTRIBUTORS "AS IS" AND
+ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT LIMITED TO, THE IMPLIED
+WARRANTIES OF MERCHANTABILITY AND FITNESS FOR A PARTICULAR PURPOSE ARE
+DISCLAIMED. IN NO EVENT SHALL THE COPYRIGHT HOLDER OR CONTRIBUTORS BE LIABLE FOR
+ANY DIRECT, INDIRECT, INCIDENTAL, SPECIAL, EXEMPLARY, OR CONSEQUENTIAL DAMAGES
+(INCLUDING, BUT NOT LIMITED TO, PROCUREMENT OF SUBSTITUTE GOODS OR SERVICES;
+LOSS OF USE, DATA, OR PROFITS; OR BUSINESS INTERRUPTION) HOWEVER CAUSED AND ON
+ANY THEORY OF LIABILITY, WHETHER IN CONTRACT, STRICT LIABILITY, OR TORT
+(INCLUDING NEGLIGENCE OR OTHERWISE) ARISING IN ANY WAY OUT OF THE USE OF THIS
+SOFTWARE, EVEN IF ADVISED OF THE POSSIBILITY OF SUCH DAMAGE.

data/vendor/assets/javascripts/px-video.js

@@ -0,0 +1,538 @@
+
+function InitPxVideo(options) {
+
+	"use strict";
+
+	// Utilities for caption time codes
+	function video_timecode_min(tc) {
+		var tcpair = [];
+		tcpair = tc.split(' --> ');
+		return videosub_tcsecs(tcpair[0]);
+	}
+
+	function video_timecode_max(tc) {
+		var tcpair = [];
+		tcpair = tc.split(' --> ');
+		return videosub_tcsecs(tcpair[1]);
+	}
+
+	function videosub_tcsecs(tc) {
+		if (tc === null || tc === undefined) {
+			return 0;
+		}
+		else {
+			var tc1 = [],
+				tc2 = [],
+				seconds;
+			tc1 = tc.split(',');
+			tc2 = tc1[0].split(':');
+			seconds = Math.floor(tc2[0]*60*60) + Math.floor(tc2[1]*60) + Math.floor(tc2[2]);
+			return seconds;
+		}
+	}
+
+	// For "manual" captions, adjust caption position when play time changed (via rewind, clicking progress bar, etc.)
+	function adjustManualCaptions(obj) {
+		obj.subcount = 0;
+		while (video_timecode_max(obj.captions[obj.subcount][0]) < obj.movie.currentTime.toFixed(1)) {
+			obj.subcount++;
+			if (obj.subcount > obj.captions.length-1) {
+				obj.subcount = obj.captions.length-1;
+				break;
+			}
+		}
+	}
+
+	// Display captions container and button (for initialization)
+	function showCaptionContainerAndButton(obj) {
+		obj.captionsBtnContainer.className = "px-video-captions-btn-container pull-left show";
+		if (obj.isCaptionDefault) {
+			obj.captionsContainer.className = "px-video-captions pull-left show";
+			obj.captionsBtn.setAttribute("checked", "checked");
+		}
+	}
+
+	// Unfortunately, due to scattered support, browser sniffing is required
+	function browserSniff() {
+		var nVer = navigator.appVersion,
+			nAgt = navigator.userAgent,
+			browserName = navigator.appName,
+			fullVersion = ''+parseFloat(navigator.appVersion),
+			majorVersion = parseInt(navigator.appVersion,10),
+			nameOffset,
+			verOffset,
+			ix;
+
+		// MSIE 11
+		if ((navigator.appVersion.indexOf("Windows NT") !== -1) && (navigator.appVersion.indexOf("rv:11") !== -1)) {
+			browserName = "IE";
+			fullVersion = "11;";
+		}
+		// MSIE
+		else if ((verOffset=nAgt.indexOf("MSIE")) !== -1) {
+			browserName = "IE";
+			fullVersion = nAgt.substring(verOffset+5);
+		}
+		// Chrome
+		else if ((verOffset=nAgt.indexOf("Chrome")) !== -1) {
+			browserName = "Chrome";
+			fullVersion = nAgt.substring(verOffset+7);
+		}
+		// Safari
+		else if ((verOffset=nAgt.indexOf("Safari")) !== -1) {
+			browserName = "Safari";
+			fullVersion = nAgt.substring(verOffset+7);
+			if ((verOffset=nAgt.indexOf("Version")) !== -1) {
+				fullVersion = nAgt.substring(verOffset+8);
+			}
+		}
+		// Firefox
+		else if ((verOffset=nAgt.indexOf("Firefox")) !== -1) {
+			browserName = "Firefox";
+			fullVersion = nAgt.substring(verOffset+8);
+		}
+		// In most other browsers, "name/version" is at the end of userAgent 
+		else if ( (nameOffset=nAgt.lastIndexOf(' ')+1) < (verOffset=nAgt.lastIndexOf('/')) ) {
+			browserName = nAgt.substring(nameOffset,verOffset);
+			fullVersion = nAgt.substring(verOffset+1);
+			if (browserName.toLowerCase()==browserName.toUpperCase()) {
+				browserName = navigator.appName;
+			}
+		}
+		// Trim the fullVersion string at semicolon/space if present
+		if ((ix=fullVersion.indexOf(";")) !== -1) {
+			fullVersion=fullVersion.substring(0,ix);
+		}
+		if ((ix=fullVersion.indexOf(" ")) !== -1) {
+			fullVersion=fullVersion.substring(0,ix);
+		}
+		// Get major version
+		majorVersion = parseInt(''+fullVersion,10);
+		if (isNaN(majorVersion)) {
+			fullVersion = ''+parseFloat(navigator.appVersion); 
+			majorVersion = parseInt(navigator.appVersion,10);
+		}
+		// Return data
+		return [browserName, majorVersion];
+	}
+
+	// Global variable
+	var obj = {};
+
+	obj.arBrowserInfo = browserSniff();
+	obj.browserName = obj.arBrowserInfo[0];
+	obj.browserMajorVersion = obj.arBrowserInfo[1];
+
+	// If IE8, stop customization (use fallback)
+	// If IE9, stop customization (use native controls)
+	if (obj.browserName === "IE" && (obj.browserMajorVersion === 8 || obj.browserMajorVersion === 9) ) {
+		return false;
+	}
+
+	// If smartphone or tablet, stop customization as video (and captions in latest devices) are handled natively
+	obj.isSmartphoneOrTablet = /Android|webOS|iPhone|iPad|iPod|BlackBerry/i.test(navigator.userAgent);
+	if (obj.isSmartphoneOrTablet) {
+		return false;
+	}
+
+	// Set debug mode
+	if (typeof(options.debug)==='undefined') {
+		options.debug = false;
+	}
+	obj.debug = options.debug;
+
+	// Output browser info to log if debug on
+	if (options.debug) {
+		console.log(obj.browserName + " " + obj.browserMajorVersion);
+	}
+
+	// Set up aria-label for Play button with the videoTitle option
+	if ((typeof(options.videoTitle)==='undefined') || (options.videoTitle==="")) {
+		obj.playAriaLabel = "Play";
+	}
+	else {
+		obj.playAriaLabel = "Play video, " + options.videoTitle;
+	}
+
+	// Get the container, video element, and controls container
+	obj.container = document.getElementById(options.videoId);
+	obj.movie = obj.container.getElementsByTagName('video')[0];
+	obj.controls = obj.container.getElementsByClassName('px-video-controls')[0];
+
+	// Remove native video controls
+	obj.movie.removeAttribute("controls");
+	
+	// Generate random number for ID/FOR attribute values for controls
+	obj.randomNum = Math.floor(Math.random() * (10000));
+	
+	// Insert custom video controls
+	if (options.debug) {
+		console.log("Inserting custom video controls");
+	}
+	obj.controls.innerHTML = '<div class="clearfix">' + 
+			'<div class="pull-left">' + 
+				'<button class="px-video-restart"><span class="sr-only">Restart</span></button>' + 
+				'<button class="px-video-rewind"><span class="sr-only">rewind <span class="px-seconds">10</span> seconds</span></button>' + 
+				'<button class="px-video-play" aria-label="'+obj.playAriaLabel+'"><span class="sr-only">Play</span></button>' + 
+				'<button class="px-video-pause hide"><span class="sr-only">Pause</span></button>' + 
+				'<button class="px-video-forward"><span class="sr-only">forward <span class="px-seconds">10</span> seconds</span></button>' + 
+			'</div>' + 
+			'<div class="px-video-mute-btn-container pull-left">' + 
+				'<input class="px-video-mute sr-only" id="btnMute'+obj.randomNum+'" type="checkbox" />' + 
+				'<label id="labelMute'+obj.randomNum+'" for="btnMute'+obj.randomNum+'"><span class="sr-only">Mute</span></label>' + 
+			'</div>' + 
+			'<div class="pull-left">' + 
+				'<label for="volume'+obj.randomNum+'" class="sr-only">Volume:</label><input id="volume'+obj.randomNum+'" class="px-video-volume" type="range" min="0" max="10" value="5" />' + 
+			'</div>' + 
+			'<div class="px-video-captions-btn-container pull-left hide">' + 
+				'<input class="px-video-btnCaptions sr-only" id="btnCaptions'+obj.randomNum+'" type="checkbox" />' + 
+				'<label for="btnCaptions'+obj.randomNum+'"><span class="sr-only">Captions</span></label>' + 
+			'</div>' + 
+			'<div class="px-video-time">' + 
+				'<span class="sr-only">time</span> <span class="px-video-duration">00:00</span>' + 
+			'</div>' + 
+		'</div>' + 
+		'<div>' + 
+			'<progress class="px-video-progress" max="100" value="0"><span>0</span>% played</progress>' + 
+		'</div>';
+
+	// Adjust layout per width of video - container
+	obj.movieWidth = obj.movie.width;
+	if (obj.movieWidth < 360) {
+		obj.movieWidth = 360;
+	}
+	obj.container.setAttribute("style", "width:" + obj.movieWidth + "px");
+	
+	// Adjust layout per width of video - controls/mute offset
+	obj.labelMute = document.getElementById("labelMute" + obj.randomNum);
+	obj.labelMuteOffset = obj.movieWidth - 390;
+	if (obj.labelMuteOffset < 0) {
+		obj.labelMuteOffset = 0;
+	}
+	obj.labelMute.setAttribute("style", "margin-left:" + obj.labelMuteOffset + "px");
+
+	// Get URL of caption file if exists
+	var captionSrc = "",
+		kind,
+		children = obj.movie.childNodes;
+
+	for (var i = 0; i < children.length; i++) {
+		if (children[i].nodeName.toLowerCase() === 'track') {
+			kind = children[i].getAttribute('kind');
+			if (kind === 'captions') {
+				captionSrc = children[i].getAttribute('src');
+			}
+		}
+	}
+
+	// Record if caption file exists or not
+	obj.captionExists = true;
+	if (captionSrc === "") {
+		obj.captionExists = false;
+		if (options.debug) {
+			console.log("No caption track found.");
+		}
+	}
+	else {
+		if (options.debug) {
+			console.log("Caption track found; URI: " + captionSrc);
+		}
+	}
+
+	// Set captions on/off - on by default
+	if (typeof(options.captionsOnDefault) === 'undefined') {
+		options.captionsOnDefault = true;
+	}
+	obj.isCaptionDefault = options.captionsOnDefault;
+
+	// Number of seconds for rewind and forward buttons
+	if (typeof(options.seekInterval) === 'undefined') {
+		options.seekInterval = 10;
+	}
+	obj.seekInterval = options.seekInterval;
+	
+	// Get the elements for the controls
+	obj.btnPlay = obj.container.getElementsByClassName('px-video-play')[0];
+	obj.btnPause = obj.container.getElementsByClassName('px-video-pause')[0];
+	obj.btnRestart = obj.container.getElementsByClassName('px-video-restart')[0];
+	obj.btnRewind = obj.container.getElementsByClassName('px-video-rewind')[0];
+	obj.btnForward = obj.container.getElementsByClassName('px-video-forward')[0];
+	obj.btnVolume = obj.container.getElementsByClassName('px-video-volume')[0];
+	obj.btnMute = obj.container.getElementsByClassName('px-video-mute')[0];
+	obj.progressBar = obj.container.getElementsByClassName('px-video-progress')[0];
+	obj.progressBarSpan = obj.progressBar.getElementsByTagName('span')[0];
+	obj.captionsContainer = obj.container.getElementsByClassName('px-video-captions')[0];
+	obj.captionsBtn = obj.container.getElementsByClassName('px-video-btnCaptions')[0];
+	obj.captionsBtnContainer = obj.container.getElementsByClassName('px-video-captions-btn-container')[0];
+	obj.duration = obj.container.getElementsByClassName('px-video-duration')[0];
+	obj.txtSeconds = obj.container.getElementsByClassName('px-seconds');
+
+	// Update number of seconds in rewind and fast forward buttons
+	obj.txtSeconds[0].innerHTML = obj.seekInterval;
+	obj.txtSeconds[1].innerHTML = obj.seekInterval;
+
+	// Determine if HTML5 textTracks is supported (for captions)
+	obj.isTextTracks = false;
+	if (obj.movie.textTracks) {
+		obj.isTextTracks = true;
+	}
+
+	// Play
+	obj.btnPlay.addEventListener('click', function() {
+		obj.movie.play();
+		obj.btnPlay.className = "px-video-play hide";
+		obj.btnPause.className = "px-video-pause px-video-show-inline";
+		obj.btnPause.focus();
+	}, false);
+
+	// Pause
+	obj.btnPause.addEventListener('click', function() {
+		obj.movie.pause(); 
+		obj.btnPlay.className = "px-video-play px-video-show-inline";
+		obj.btnPause.className = "px-video-pause hide";
+		obj.btnPlay.focus();
+	}, false);
+
+	// Restart
+	obj.btnRestart.addEventListener('click', function() {
+		// Move to beginning
+		obj.movie.currentTime = 0;
+
+		// Special handling for "manual" captions
+		if (!obj.isTextTracks) {
+			obj.subcount = 0;
+		}
+
+		// Play and ensure the play button is in correct state
+		obj.movie.play();
+		obj.btnPlay.className = "px-video-play hide";
+		obj.btnPause.className = "px-video-pause px-video-show-inline";
+
+	}, false);
+
+	// Rewind
+	obj.btnRewind.addEventListener('click', function() {
+	    var targetTime = obj.movie.currentTime - obj.seekInterval;
+	    if (targetTime < 0) {
+	      obj.movie.currentTime = 0;
+	    }
+	    else {
+	      obj.movie.currentTime = targetTime;
+	    }
+		// Special handling for "manual" captions
+		if (!obj.isTextTracks) {
+			adjustManualCaptions(obj);
+		}
+	}, false);
+
+	// Fast forward
+	obj.btnForward.addEventListener('click', function() {
+	    var targetTime = obj.movie.currentTime + obj.seekInterval;
+		if (targetTime > obj.movie.duration) {
+			obj.movie.currentTime = obj.movie.duration;
+		}
+		else {
+			obj.movie.currentTime = targetTime;
+		}
+		// Special handling for "manual" captions
+		if (!obj.isTextTracks) {
+			adjustManualCaptions(obj);
+		}
+	}, false);
+
+	// Get the HTML5 range input element and append audio volume adjustment on change
+	obj.btnVolume.addEventListener('change', function() {
+		obj.movie.volume = parseFloat(this.value / 10);
+	}, false);
+
+	// Mute
+	obj.btnMute.addEventListener('click', function() {
+		if (obj.movie.muted === true) {
+			obj.movie.muted = false;
+		}
+		else {
+			obj.movie.muted = true;
+		}
+	}, false);
+	
+	// Duration
+	obj.movie.addEventListener("timeupdate", function() {
+		obj.secs = parseInt(obj.movie.currentTime % 60);
+		obj.mins = parseInt((obj.movie.currentTime / 60) % 60);
+		
+		// Ensure it's two digits. For example, 03 rather than 3.
+		obj.secs = ("0" + obj.secs).slice(-2);
+		obj.mins = ("0" + obj.mins).slice(-2);
+
+		// Render
+		obj.duration.innerHTML = obj.mins + ':' + obj.secs;
+	}, false);
+
+	// Progress bar
+	obj.movie.addEventListener('timeupdate', function() {
+		obj.percent = Math.floor((100 / obj.movie.duration) * obj.movie.currentTime);
+		if (obj.percent > 0) {
+			obj.progressBar.value = obj.percent;
+			obj.progressBarSpan.innerHTML = obj.percent;
+		}
+	}, false);
+
+	// Skip when clicking progress bar
+	obj.progressBar.addEventListener('click', function(e) {
+		obj.pos = (e.pageX - this.offsetLeft) / this.offsetWidth;
+		obj.movie.currentTime = obj.pos * obj.movie.duration;
+		
+		// Special handling for "manual" captions
+		if (!obj.isTextTracks) {
+			adjustManualCaptions(obj);
+		}
+	});
+
+	// Clear captions at end of video
+	obj.movie.addEventListener('ended', function() {
+		obj.captionsContainer.innerHTML = "";
+	});
+
+	// ***
+	// Captions
+	// ***
+
+	// Toggle display of captions via captions button
+	obj.captionsBtn.addEventListener('click', function() { 
+		if (this.checked) {
+			obj.captionsContainer.className = "px-video-captions show";
+		} else {
+			obj.captionsContainer.className = "px-video-captions hide";
+		}
+	}, false);
+
+	// If no caption file exists, hide container for caption text
+	if (!obj.captionExists) {
+		obj.captionsContainer.className = "px-video-captions hide";
+	}
+
+	// If caption file exists, process captions
+	else {
+
+		// If IE 10/11 or Firefox 31 or Safari 7, don't use native captioning (still doesn't work although they claim it's now supported)
+		if ((obj.browserName==="IE" && obj.browserMajorVersion===10) || 
+				(obj.browserName==="IE" && obj.browserMajorVersion===11) || 
+				(obj.browserName==="Firefox" && obj.browserMajorVersion>=31) || 
+				(obj.browserName==="Safari" && obj.browserMajorVersion===7)) {
+			if (options.debug) {
+				console.log("Detected IE 10/11 or Firefox 31+ or Safari 7");
+			}
+			// set to false so skips to 'manual' captioning
+			obj.isTextTracks = false;
+			
+			// turn off native caption rendering to avoid double captions [doesn't work in Safari 7; see patch below]
+			var track = {};
+			var tracks = obj.movie.textTracks;
+			for (var j=0; j < tracks.length; j++) {
+				track = obj.movie.textTracks[j];
+				track.mode = "hidden";
+			}
+		}
+
+		// Rendering caption tracks - native support required - http://caniuse.com/webvtt
+		if (obj.isTextTracks) {
+			if (options.debug) {
+				console.log("textTracks supported");
+			}
+			showCaptionContainerAndButton(obj);
+
+			var track = {};
+			var tracks = obj.movie.textTracks;
+			for (var j=0; j < tracks.length; j++) {
+				track = obj.movie.textTracks[j];
+				track.mode = "hidden";
+				if (track.kind === "captions") {
+					track.addEventListener("cuechange",function() {
+						if (this.activeCues[0]) {
+							if (this.activeCues[0].hasOwnProperty("text")) {
+								obj.captionsContainer.innerHTML = this.activeCues[0].text;
+							}
+						}
+					},false);
+				}
+			}
+		}
+		// Caption tracks not natively supported
+		else {
+			if (options.debug) {
+				console.log("textTracks not supported so rendering captions 'manually'");
+			}
+			showCaptionContainerAndButton(obj);
+
+			// Render captions from array at apppropriate time
+			obj.currentCaption = '';
+			obj.subcount = 0;
+			obj.captions = [];
+
+			obj.movie.addEventListener('timeupdate', function() {
+				// Check if the next caption is in the current time range
+				if (obj.movie.currentTime.toFixed(1) > video_timecode_min(obj.captions[obj.subcount][0]) && 
+					obj.movie.currentTime.toFixed(1) < video_timecode_max(obj.captions[obj.subcount][0])) {
+						obj.currentCaption = obj.captions[obj.subcount][1];
+				}
+				// Is there a next timecode?
+				if (obj.movie.currentTime.toFixed(1) > video_timecode_max(obj.captions[obj.subcount][0]) && 
+					obj.subcount < (obj.captions.length-1)) {
+						obj.subcount++;
+				}
+				// Render the caption
+				obj.captionsContainer.innerHTML = obj.currentCaption;
+			}, false);
+
+			if (captionSrc != "") {
+				// Create XMLHttpRequest object
+				var xhr;
+				if (window.XMLHttpRequest) {
+					xhr = new XMLHttpRequest();
+				} else if (window.ActiveXObject) { // IE8
+					xhr = new ActiveXObject("Microsoft.XMLHTTP");
+				}
+				xhr.onreadystatechange = function() {
+					if (xhr.readyState === 4) {
+						if (xhr.status === 200) {
+							if (options.debug) {
+								console.log("xhr = 200");
+							}
+							
+							obj.captions = [];
+							var records = [], 
+								record,
+								req = xhr.responseText;
+							records = req.split('\n\n');
+							for (var r=0; r < records.length; r++) {
+								record = records[r];
+								obj.captions[r] = [];
+								obj.captions[r] = record.split('\n');
+							}
+							// Remove first element ("VTT")
+							obj.captions.shift();
+
+							if (options.debug) {
+								console.log('Successfully loaded the caption file via ajax.');
+							}
+						} else {
+							if (options.debug) {
+								console.log('There was a problem loading the caption file via ajax.');
+							}
+						}
+					}
+				}
+				xhr.open("get", captionSrc, true);
+				xhr.send();
+			}
+		}
+
+		// If Safari 7, removing track from DOM [see 'turn off native caption rendering' above]
+		if (obj.browserName === "Safari" && obj.browserMajorVersion === 7) {
+			console.log("Safari 7 detected; removing track from DOM");
+			var tracks = obj.movie.getElementsByTagName("track");
+			obj.movie.removeChild(tracks[0]);
+		}
+
+	}
+};

data/vendor/assets/stylesheets/px-video.css.erb

@@ -0,0 +1,234 @@
+
+/* utilities */
+.pull-left {
+	float: left;
+}
+.sr-only {
+	position: absolute !important;
+	clip: rect(1px, 1px, 1px, 1px);
+	padding: 0 !important;
+	border: 0 !important;
+	height: 1px !important;
+	width: 1px !important;
+	overflow: hidden;
+}
+.hide {
+    display: none;
+}
+.show-inline {
+	display: inline-block;
+}
+
+/* containers */
+.px-video-img-captions-container * {
+	box-sizing: border-box;
+}
+
+.px-video-img-captions-container {
+	position: relative;
+}
+
+/* progress indicator */
+.px-video-progress {
+	width: 100%;
+	height: 10px;
+}
+.px-video-progress[value] {
+	/* Reset the default appearance */
+	-webkit-appearance: none;
+	border: none;
+}
+.px-video-progress[value]::-webkit-progress-bar {
+	background-color: #E6E6E6;
+}
+.px-video-progress[value]::-webkit-progress-value {
+	background-color: #009CDF;
+}
+
+/* time */
+.px-video-time {
+	font-family: "Helvetica Neue",Helvetica,Arial,sans-serif;
+	float: right;
+	margin-top: 2px;
+	font-size: 14px;
+}
+
+/* caption area */
+.px-video-captions {
+	position: absolute;
+	top: 0;
+	left: 0;
+	width: 100%;
+	padding: .5em;
+	min-height: 2.5em;
+	background-color: #000;
+	color: #fff;
+	font-size: 1.1em;
+	text-align: center;
+	opacity: 0.75;
+}
+
+/* buttons */
+.px-video-controls button {
+	border: 1px #fff solid;
+	background: transparent;
+	padding: 0;
+	margin: 0 5px;
+	width: 25px;
+	height: 20px;
+	overflow: hidden;
+	background: no-repeat url('<%= asset_path('px-video-sprite.png') %>');
+}
+.px-video-controls button:focus {
+	border: 1px #999 dotted;
+	outline: none;
+}
+.px-video-controls button {
+	cursor: pointer;
+}
+
+/* restart button */
+.px-video-controls button.px-video-restart {
+	background-position: -9px -333px;
+}
+.px-video-controls button.px-video-restart:hover,
+.px-video-controls button.px-video-restart:focus {
+	background-position: -9px -297px;
+}
+
+/* rewind button */
+.px-video-controls button.px-video-rewind {
+	background-position: -11px -189px;
+}
+.px-video-controls button.px-video-rewind:hover,
+.px-video-controls button.px-video-rewind:focus {
+	background-position: -11px -153px;
+}
+
+/* play button */
+.px-video-controls button.px-video-play {
+	background-position: -11px -45px;
+}
+.px-video-controls button.px-video-play:hover,
+.px-video-controls button.px-video-play:focus {
+	background-position: -11px -9px;
+}
+
+/* pause button */
+.px-video-controls button.px-video-pause {
+	background-position: -11px -117px;
+}
+.px-video-controls button.px-video-pause:hover,
+.px-video-controls button.px-video-pause:focus {
+	background-position: -11px -81px;
+}
+
+/* forward button */
+.px-video-controls button.px-video-forward {
+	background-position: -13px -261px;
+}
+.px-video-controls button.px-video-forward:hover,
+.px-video-controls button.px-video-forward:focus {
+	background-position: -13px -225px;
+}
+
+/* captions button */
+.px-video-captions-btn-container label {
+	display: inline-block;
+	width: 25px;
+	height: 20px;
+	margin-left: 25px;
+	background: no-repeat url('<%= asset_path('px-video-sprite.png') %>');
+	background-position: -6px -835px;
+}
+.px-video-captions-btn-container input[type="checkbox"]:focus+label {
+	outline: 1px #999 dotted;
+	background-position: -6px -799px;
+}
+.px-video-captions-btn-container input[type="checkbox"]:hover+label {
+	background-position: -6px -799px;
+	cursor: pointer;
+}
+.px-video-captions-btn-container input[type="checkbox"]:focus+label {
+	outline: 1px #999 dotted;
+	background-position: -6px -799px;
+}
+.px-video-captions-btn-container input[type="checkbox"]:checked+label {
+	background-position: -6px -871px;
+}
+
+/* mute button */
+.px-video-mute-btn-container label {
+	display: inline-block;
+	width: 25px;
+	height: 20px;
+	margin-left: 240px;
+	margin-top: 2px;
+	background: no-repeat url('<%= asset_path('px-video-sprite.png') %>');
+	background-position: -6px -476px;
+}
+.px-video-mute-btn-container input[type="checkbox"]:focus+label {
+	outline: 1px #999 dotted;
+	background-position: -6px -440px;
+}
+.px-video-mute-btn-container input[type="checkbox"]:hover+label {
+	background-position: -6px -440px;
+	cursor: pointer;
+}
+.px-video-mute-btn-container input[type="checkbox"]:focus+label {
+	outline: 1px #999 dotted;
+	background-position: -6px -440px;
+}
+/* checked state of mute button */
+.px-video-mute-btn-container input[type="checkbox"]:checked+label {
+	background-position: -6px -692px;
+}
+.px-video-mute-btn-container input[type="checkbox"]:checked:hover+label,
+.px-video-mute-btn-container input[type="checkbox"]:checked:focus+label {
+	background-position: -6px -656px;
+}
+
+/* volume range input */
+.px-video-controls input[type='range'] {
+	-webkit-appearance: none;
+	height: 6px;
+	width: 100px;
+	margin-top: 8px;
+	background-color: #E6E6E6;
+	outline:none;
+}
+.px-video-controls input[type='range']:focus::-webkit-slider-thumb {
+	outline: 1px #999 dotted;
+}
+.px-video-controls input[type='range']::-moz-range-track {
+	-moz-appearance: none;
+	height: 6px;
+	background-color: #E6E6E6;
+	border: none;
+}
+.px-video-controls input[type='range']::-webkit-slider-thumb {
+	-webkit-appearance: none !important;
+	height: 10px;
+	width: 6px;
+	background-color: #666;
+}
+.px-video-controls input[type='range']::-moz-range-thumb {
+	height: 12px;
+	width: 8px;
+}
+/* fixing display for IE10+ */
+@media screen and (-ms-high-contrast: active), (-ms-high-contrast: none) {
+	.px-video-controls input[type='range'] {
+		position: relative;
+		padding: 0;
+		height: 8px;
+		top: -3px;
+	}
+	.px-video-time {
+		margin-top: 4px;
+	}
+	.px-video-captions {
+		padding: 8px;
+		min-height: 36px;
+	}
+}

metadata

@@ -0,0 +1,55 @@
+--- !ruby/object:Gem::Specification
+name: pxvideo_rails
+version: !ruby/object:Gem::Version
+  version: 0.0.1
+platform: ruby
+authors:
+- Alexandr Kardakov
+autorequire: 
+bindir: bin
+cert_chain: []
+date: 2014-09-15 00:00:00.000000000 Z
+dependencies: []
+description: '%q{HTML5 PxVideo plugin}'
+email: razielsun@gmail.com
+executables: []
+extensions: []
+extra_rdoc_files: []
+files:
+- .gitignore
+- Rakefile
+- Readme.md
+- app/views/pxvideo_rails/_pxvideo_rails.html.erb
+- lib/pxvideo_rails.rb
+- lib/pxvideo_rails/engine.rb
+- lib/pxvideo_rails/railtie.rb
+- lib/pxvideo_rails/view_helpers.rb
+- pxvideo_rails.gemspec
+- vendor/assets/LICENSE.md
+- vendor/assets/images/px-video-sprite.png
+- vendor/assets/javascripts/px-video.js
+- vendor/assets/stylesheets/px-video.css.erb
+homepage: ''
+licenses: []
+metadata: {}
+post_install_message: 
+rdoc_options: []
+require_paths:
+- lib
+required_ruby_version: !ruby/object:Gem::Requirement
+  requirements:
+  - - '>='
+    - !ruby/object:Gem::Version
+      version: '0'
+required_rubygems_version: !ruby/object:Gem::Requirement
+  requirements:
+  - - '>='
+    - !ruby/object:Gem::Version
+      version: '0'
+requirements: []
+rubyforge_project: 
+rubygems_version: 2.4.1
+signing_key: 
+specification_version: 4
+summary: '%q{Pxvideo html5 video plugin}'
+test_files: []