├── vendor └── .gitkeep ├── test ├── dummy │ ├── db │ │ └── .gitkeep │ ├── log │ │ └── .gitkeep │ ├── app │ │ ├── mailers │ │ │ └── .gitkeep │ │ ├── models │ │ │ └── .gitkeep │ │ ├── helpers │ │ │ └── application_helper.rb │ │ ├── assets │ │ │ ├── stylesheets │ │ │ │ ├── player.css │ │ │ │ └── player-skins.css │ │ │ └── javascripts │ │ │ │ ├── mediaelement-and-player.js │ │ │ │ └── mediaelement-without-player.js │ │ ├── controllers │ │ │ └── application_controller.rb │ │ └── views │ │ │ └── layouts │ │ │ └── application.html.erb │ ├── lib │ │ └── assets │ │ │ └── .gitkeep │ ├── public │ │ ├── favicon.ico │ │ ├── 422.html │ │ ├── 404.html │ │ └── 500.html │ ├── config │ │ ├── routes.rb │ │ ├── environment.rb │ │ ├── locales │ │ │ └── en.yml │ │ ├── initializers │ │ │ ├── mime_types.rb │ │ │ ├── inflections.rb │ │ │ ├── backtrace_silencers.rb │ │ │ ├── session_store.rb │ │ │ ├── wrap_parameters.rb │ │ │ └── secret_token.rb │ │ ├── boot.rb │ │ ├── database.yml │ │ ├── environments │ │ │ ├── development.rb │ │ │ ├── test.rb │ │ │ └── production.rb │ │ └── application.rb │ ├── config.ru │ ├── Rakefile │ └── script │ │ └── rails ├── test_helper.rb └── integration │ └── assets_test.rb ├── app └── assets │ ├── stylesheets │ └── mediaelement_rails │ │ ├── index.css │ │ ├── mejs-skins.css.erb │ │ └── mediaelementplayer.css.erb │ ├── javascripts │ └── mediaelement_rails │ │ ├── index.js │ │ ├── rails.js.erb │ │ └── mediaelement.js │ ├── images │ └── mediaelement_rails │ │ ├── bigplay.png │ │ ├── loading.gif │ │ ├── background.png │ │ ├── bigplay.fw.png │ │ ├── controls.png │ │ ├── skipback.png │ │ ├── controls-ted.png │ │ ├── controls-wmp.png │ │ ├── controls.fw.png │ │ ├── controls-wmp-bg.png │ │ ├── bigplay.svg │ │ └── controls.svg │ └── plugins │ └── mediaelement_rails │ ├── flashmediaelement.swf │ ├── flashmediaelement-cdn.swf │ └── silverlightmediaelement.xap ├── lib ├── mediaelement_rails │ ├── version.rb │ └── engine.rb └── mediaelement_rails.rb ├── Gemfile ├── .gitignore ├── Rakefile ├── script └── rails ├── CHANGELOG.md ├── MIT-LICENSE ├── mediaelement_rails.gemspec ├── README.md └── mediaelement_rails.thor /vendor/.gitkeep: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /test/dummy/db/.gitkeep: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /test/dummy/log/.gitkeep: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /test/dummy/app/mailers/.gitkeep: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /test/dummy/app/models/.gitkeep: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /test/dummy/lib/assets/.gitkeep: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /test/dummy/public/favicon.ico: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /app/assets/stylesheets/mediaelement_rails/index.css: -------------------------------------------------------------------------------- 1 | //=require ./mediaelementplayer -------------------------------------------------------------------------------- /test/dummy/app/helpers/application_helper.rb: -------------------------------------------------------------------------------- 1 | module ApplicationHelper 2 | end 3 | -------------------------------------------------------------------------------- /test/dummy/config/routes.rb: -------------------------------------------------------------------------------- 1 | Rails.application.routes.draw do 2 | 3 | end 4 | -------------------------------------------------------------------------------- /test/dummy/app/assets/stylesheets/player.css: -------------------------------------------------------------------------------- 1 | /* 2 | *= require mediaelement_rails 3 | */ 4 | -------------------------------------------------------------------------------- /lib/mediaelement_rails/version.rb: -------------------------------------------------------------------------------- 1 | module MediaelementRails 2 | VERSION = '0.8.2' 3 | end 4 | -------------------------------------------------------------------------------- /test/dummy/app/assets/javascripts/mediaelement-and-player.js: -------------------------------------------------------------------------------- 1 | //= require mediaelement_rails 2 | -------------------------------------------------------------------------------- /app/assets/javascripts/mediaelement_rails/index.js: -------------------------------------------------------------------------------- 1 | //= require ./rails 2 | //= require ./mediaelementplayer -------------------------------------------------------------------------------- /test/dummy/app/assets/javascripts/mediaelement-without-player.js: -------------------------------------------------------------------------------- 1 | //= require mediaelement_rails/rails 2 | -------------------------------------------------------------------------------- /test/dummy/app/assets/stylesheets/player-skins.css: -------------------------------------------------------------------------------- 1 | /* 2 | *= require mediaelement_rails/mejs-skins 3 | */ 4 | -------------------------------------------------------------------------------- /Gemfile: -------------------------------------------------------------------------------- 1 | source "http://rubygems.org" 2 | 3 | # Specify your gem's dependencies in medialement_rails.gemspec 4 | gemspec 5 | -------------------------------------------------------------------------------- /lib/mediaelement_rails.rb: -------------------------------------------------------------------------------- 1 | require "mediaelement_rails/version" 2 | require "mediaelement_rails/engine" 3 | 4 | module MediaelementRails 5 | end 6 | -------------------------------------------------------------------------------- /test/dummy/app/controllers/application_controller.rb: -------------------------------------------------------------------------------- 1 | class ApplicationController < ActionController::Base 2 | protect_from_forgery 3 | end 4 | -------------------------------------------------------------------------------- /app/assets/images/mediaelement_rails/bigplay.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/tobsch/mediaelement_rails/HEAD/app/assets/images/mediaelement_rails/bigplay.png -------------------------------------------------------------------------------- /app/assets/images/mediaelement_rails/loading.gif: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/tobsch/mediaelement_rails/HEAD/app/assets/images/mediaelement_rails/loading.gif -------------------------------------------------------------------------------- /app/assets/images/mediaelement_rails/background.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/tobsch/mediaelement_rails/HEAD/app/assets/images/mediaelement_rails/background.png -------------------------------------------------------------------------------- /app/assets/images/mediaelement_rails/bigplay.fw.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/tobsch/mediaelement_rails/HEAD/app/assets/images/mediaelement_rails/bigplay.fw.png -------------------------------------------------------------------------------- /app/assets/images/mediaelement_rails/controls.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/tobsch/mediaelement_rails/HEAD/app/assets/images/mediaelement_rails/controls.png -------------------------------------------------------------------------------- /app/assets/images/mediaelement_rails/skipback.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/tobsch/mediaelement_rails/HEAD/app/assets/images/mediaelement_rails/skipback.png -------------------------------------------------------------------------------- /app/assets/images/mediaelement_rails/controls-ted.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/tobsch/mediaelement_rails/HEAD/app/assets/images/mediaelement_rails/controls-ted.png -------------------------------------------------------------------------------- /app/assets/images/mediaelement_rails/controls-wmp.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/tobsch/mediaelement_rails/HEAD/app/assets/images/mediaelement_rails/controls-wmp.png -------------------------------------------------------------------------------- /app/assets/images/mediaelement_rails/controls.fw.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/tobsch/mediaelement_rails/HEAD/app/assets/images/mediaelement_rails/controls.fw.png -------------------------------------------------------------------------------- /app/assets/images/mediaelement_rails/controls-wmp-bg.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/tobsch/mediaelement_rails/HEAD/app/assets/images/mediaelement_rails/controls-wmp-bg.png -------------------------------------------------------------------------------- /app/assets/plugins/mediaelement_rails/flashmediaelement.swf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/tobsch/mediaelement_rails/HEAD/app/assets/plugins/mediaelement_rails/flashmediaelement.swf -------------------------------------------------------------------------------- /.gitignore: -------------------------------------------------------------------------------- 1 | *.DS_Store 2 | .bundle/ 3 | pkg/ 4 | Gemfile.lock 5 | log/*.log 6 | test/dummy/db/*.sqlite3 7 | test/dummy/log/*.log 8 | test/dummy/tmp/ 9 | vendor/mediaelement 10 | -------------------------------------------------------------------------------- /app/assets/plugins/mediaelement_rails/flashmediaelement-cdn.swf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/tobsch/mediaelement_rails/HEAD/app/assets/plugins/mediaelement_rails/flashmediaelement-cdn.swf -------------------------------------------------------------------------------- /app/assets/plugins/mediaelement_rails/silverlightmediaelement.xap: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/tobsch/mediaelement_rails/HEAD/app/assets/plugins/mediaelement_rails/silverlightmediaelement.xap -------------------------------------------------------------------------------- /test/dummy/config.ru: -------------------------------------------------------------------------------- 1 | # This file is used by Rack-based servers to start the application. 2 | 3 | require ::File.expand_path('../config/environment', __FILE__) 4 | run Dummy::Application 5 | -------------------------------------------------------------------------------- /test/dummy/config/environment.rb: -------------------------------------------------------------------------------- 1 | # Load the rails application 2 | require File.expand_path('../application', __FILE__) 3 | 4 | # Initialize the rails application 5 | Dummy::Application.initialize! 6 | -------------------------------------------------------------------------------- /test/dummy/config/locales/en.yml: -------------------------------------------------------------------------------- 1 | # Sample localization file for English. Add more files in this directory for other locales. 2 | # See https://github.com/svenfuchs/rails-i18n/tree/master/rails%2Flocale for starting points. 3 | 4 | en: 5 | hello: "Hello world" 6 | -------------------------------------------------------------------------------- /test/dummy/config/initializers/mime_types.rb: -------------------------------------------------------------------------------- 1 | # Be sure to restart your server when you modify this file. 2 | 3 | # Add new mime types for use in respond_to blocks: 4 | # Mime::Type.register "text/richtext", :rtf 5 | # Mime::Type.register_alias "text/html", :iphone 6 | -------------------------------------------------------------------------------- /Rakefile: -------------------------------------------------------------------------------- 1 | #!/usr/bin/env rake 2 | require "bundler/gem_tasks" 3 | 4 | require "rake/testtask" 5 | Rake::TestTask.new(:test) do |t| 6 | t.libs << "lib" 7 | t.libs << "test" 8 | t.pattern = "test/**/*_test.rb" 9 | t.verbose = false 10 | end 11 | 12 | task :default => :test 13 | -------------------------------------------------------------------------------- /script/rails: -------------------------------------------------------------------------------- 1 | #!/usr/bin/env ruby 2 | # This command will automatically be run when you run "rails" with Rails 3 gems installed from the root of your application. 3 | 4 | ENGINE_PATH = File.expand_path('../..', __FILE__) 5 | load File.expand_path('../../test/dummy/script/rails', __FILE__) 6 | -------------------------------------------------------------------------------- /test/dummy/config/boot.rb: -------------------------------------------------------------------------------- 1 | require 'rubygems' 2 | gemfile = File.expand_path('../../../../Gemfile', __FILE__) 3 | 4 | if File.exist?(gemfile) 5 | ENV['BUNDLE_GEMFILE'] = gemfile 6 | require 'bundler' 7 | Bundler.setup 8 | end 9 | 10 | $:.unshift File.expand_path('../../../../lib', __FILE__) -------------------------------------------------------------------------------- /test/dummy/Rakefile: -------------------------------------------------------------------------------- 1 | #!/usr/bin/env rake 2 | # Add your own tasks in files placed in lib/tasks ending in .rake, 3 | # for example lib/tasks/capistrano.rake, and they will automatically be available to Rake. 4 | 5 | require File.expand_path('../config/application', __FILE__) 6 | 7 | Dummy::Application.load_tasks 8 | -------------------------------------------------------------------------------- /test/dummy/app/views/layouts/application.html.erb: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | Dummy 5 | <%= stylesheet_link_tag "application" %> 6 | <%= javascript_include_tag "application" %> 7 | <%= csrf_meta_tags %> 8 | 9 | 10 | 11 | <%= yield %> 12 | 13 | 14 | 15 | -------------------------------------------------------------------------------- /test/dummy/script/rails: -------------------------------------------------------------------------------- 1 | #!/usr/bin/env ruby 2 | # This command will automatically be run when you run "rails" with Rails 3 gems installed from the root of your application. 3 | 4 | APP_PATH = File.expand_path('../../config/application', __FILE__) 5 | require File.expand_path('../../config/boot', __FILE__) 6 | require 'rails/commands' 7 | -------------------------------------------------------------------------------- /app/assets/javascripts/mediaelement_rails/rails.js.erb: -------------------------------------------------------------------------------- 1 | //= require ./mediaelement 2 | 3 | mejs.MediaElementDefaults.pluginPath = '' 4 | mejs.MediaElementDefaults.flashName = '<%= asset_path 'mediaelement_rails/flashmediaelement.swf' %>' 5 | mejs.MediaElementDefaults.silverlightName = '<%= asset_path 'mediaelement_rails/silverlightmediaelement.xap' %>' -------------------------------------------------------------------------------- /test/test_helper.rb: -------------------------------------------------------------------------------- 1 | # Configure Rails Environment 2 | ENV["RAILS_ENV"] = "test" 3 | 4 | require File.expand_path("../dummy/config/environment.rb", __FILE__) 5 | require "rails/test_help" 6 | require "turn" 7 | 8 | Rails.backtrace_cleaner.remove_silencers! 9 | 10 | # Load support files 11 | Dir["#{File.dirname(__FILE__)}/support/**/*.rb"].each { |f| require f } 12 | -------------------------------------------------------------------------------- /CHANGELOG.md: -------------------------------------------------------------------------------- 1 | ## Changelog 2 | 3 | ### v0.8.2 (2015-08-07) 4 | 5 | - Updated MediaElement.js to 2.18.0 6 | 7 | ### v0.8.1 8 | 9 | - Updated MediaElement.js to 2.14.4 (danlopez191) 10 | 11 | ### v0.8 12 | 13 | - Updated MediaElement.js to 2.14.2 14 | 15 | ### v0.7.0 16 | 17 | - Updated MediaElement.js to 2.13.2 18 | - Change "git co" to "git checkout" in thor script 19 | -------------------------------------------------------------------------------- /lib/mediaelement_rails/engine.rb: -------------------------------------------------------------------------------- 1 | require "rails/engine" 2 | require "jquery-rails" 3 | 4 | module MediaelementRails 5 | class Engine < Rails::Engine 6 | initializer 'mediaelement_rails', :after => "sprockets.environment" do |app| 7 | next unless app.assets 8 | app.assets.register_mime_type "application/x-silverlight-app", ".xap" 9 | end 10 | end 11 | end 12 | -------------------------------------------------------------------------------- /test/dummy/config/initializers/inflections.rb: -------------------------------------------------------------------------------- 1 | # Be sure to restart your server when you modify this file. 2 | 3 | # Add new inflection rules using the following format 4 | # (all these examples are active by default): 5 | # ActiveSupport::Inflector.inflections do |inflect| 6 | # inflect.plural /^(ox)$/i, '\1en' 7 | # inflect.singular /^(ox)en/i, '\1' 8 | # inflect.irregular 'person', 'people' 9 | # inflect.uncountable %w( fish sheep ) 10 | # end 11 | -------------------------------------------------------------------------------- /test/dummy/config/initializers/backtrace_silencers.rb: -------------------------------------------------------------------------------- 1 | # Be sure to restart your server when you modify this file. 2 | 3 | # You can add backtrace silencers for libraries that you're using but don't wish to see in your backtraces. 4 | # Rails.backtrace_cleaner.add_silencer { |line| line =~ /my_noisy_library/ } 5 | 6 | # You can also remove all the silencers if you're trying to debug a problem that might stem from framework code. 7 | # Rails.backtrace_cleaner.remove_silencers! 8 | -------------------------------------------------------------------------------- /test/dummy/config/initializers/session_store.rb: -------------------------------------------------------------------------------- 1 | # Be sure to restart your server when you modify this file. 2 | 3 | Dummy::Application.config.session_store :cookie_store, :key => '_dummy_session' 4 | 5 | # Use the database for sessions instead of the cookie-based default, 6 | # which shouldn't be used to store highly confidential information 7 | # (create the session table with "rails generate session_migration") 8 | # Dummy::Application.config.session_store :active_record_store 9 | -------------------------------------------------------------------------------- /test/dummy/config/initializers/wrap_parameters.rb: -------------------------------------------------------------------------------- 1 | # Be sure to restart your server when you modify this file. 2 | # 3 | # This file contains settings for ActionController::ParamsWrapper which 4 | # is enabled by default. 5 | 6 | # Enable parameter wrapping for JSON. You can disable this by setting :format to an empty array. 7 | ActionController::Base.wrap_parameters :format => [:json] 8 | 9 | # Disable root element in JSON by default. 10 | if defined?(ActiveRecord) 11 | ActiveRecord::Base.include_root_in_json = false 12 | end 13 | -------------------------------------------------------------------------------- /test/dummy/config/initializers/secret_token.rb: -------------------------------------------------------------------------------- 1 | # Be sure to restart your server when you modify this file. 2 | 3 | # Your secret key for verifying the integrity of signed cookies. 4 | # If you change this key, all old signed cookies will become invalid! 5 | # Make sure the secret is at least 30 characters and all random, 6 | # no regular words or you'll be exposed to dictionary attacks. 7 | Dummy::Application.config.secret_token = 'f906571bcc07e3c38909d12bffa600c3cb5b4d486fe965aa80058190ae9e356cfb13cd1652ab0fe32f4e638e64b497ceb1ed180bf1756b00f910f87e52a3cdbb' 8 | -------------------------------------------------------------------------------- /test/dummy/config/database.yml: -------------------------------------------------------------------------------- 1 | # SQLite version 3.x 2 | # gem install sqlite3 3 | # 4 | # Ensure the SQLite 3 gem is defined in your Gemfile 5 | # gem 'sqlite3' 6 | development: 7 | adapter: sqlite3 8 | database: db/development.sqlite3 9 | pool: 5 10 | timeout: 5000 11 | 12 | # Warning: The database defined as "test" will be erased and 13 | # re-generated from your development database when you run "rake". 14 | # Do not set this db to the same as development or production. 15 | test: 16 | adapter: sqlite3 17 | database: db/test.sqlite3 18 | pool: 5 19 | timeout: 5000 20 | 21 | production: 22 | adapter: sqlite3 23 | database: db/production.sqlite3 24 | pool: 5 25 | timeout: 5000 26 | -------------------------------------------------------------------------------- /test/dummy/public/422.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | The change you wanted was rejected (422) 5 | 17 | 18 | 19 | 20 | 21 |
22 |

The change you wanted was rejected.

23 |

Maybe you tried to change something you didn't have access to.

24 |
25 | 26 | 27 | -------------------------------------------------------------------------------- /test/dummy/public/404.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | The page you were looking for doesn't exist (404) 5 | 17 | 18 | 19 | 20 | 21 |
22 |

The page you were looking for doesn't exist.

23 |

You may have mistyped the address or the page may have moved.

24 |
25 | 26 | 27 | -------------------------------------------------------------------------------- /test/dummy/public/500.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | We're sorry, but something went wrong (500) 5 | 17 | 18 | 19 | 20 | 21 |
22 |

We're sorry, but something went wrong.

23 |

We've been notified about this issue and we'll take a look at it shortly.

24 |
25 | 26 | 27 | -------------------------------------------------------------------------------- /test/dummy/config/environments/development.rb: -------------------------------------------------------------------------------- 1 | Dummy::Application.configure do 2 | # Settings specified here will take precedence over those in config/application.rb 3 | 4 | # In the development environment your application's code is reloaded on 5 | # every request. This slows down response time but is perfect for development 6 | # since you don't have to restart the web server when you make code changes. 7 | config.cache_classes = false 8 | 9 | # Log error messages when you accidentally call methods on nil. 10 | config.whiny_nils = true 11 | 12 | # Show full error reports and disable caching 13 | config.consider_all_requests_local = true 14 | config.action_controller.perform_caching = false 15 | 16 | # Print deprecation notices to the Rails logger 17 | config.active_support.deprecation = :log 18 | 19 | # Only use best-standards-support built into browsers 20 | config.action_dispatch.best_standards_support = :builtin 21 | 22 | # Do not compress assets 23 | config.assets.compress = false 24 | end 25 | -------------------------------------------------------------------------------- /app/assets/images/mediaelement_rails/bigplay.svg: -------------------------------------------------------------------------------- 1 | 2 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | -------------------------------------------------------------------------------- /MIT-LICENSE: -------------------------------------------------------------------------------- 1 | Copyright 2014 Pete Browne, Tobias Schlottke, Mark Oleson 2 | 3 | Permission is hereby granted, free of charge, to any person obtaining 4 | a copy of this software and associated documentation files (the 5 | "Software"), to deal in the Software without restriction, including 6 | without limitation the rights to use, copy, modify, merge, publish, 7 | distribute, sublicense, and/or sell copies of the Software, and to 8 | permit persons to whom the Software is furnished to do so, subject to 9 | the following conditions: 10 | 11 | The above copyright notice and this permission notice shall be 12 | included in all copies or substantial portions of the Software. 13 | 14 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, 15 | EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF 16 | MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND 17 | NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE 18 | LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION 19 | OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION 20 | WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE. 21 | -------------------------------------------------------------------------------- /mediaelement_rails.gemspec: -------------------------------------------------------------------------------- 1 | # -*- encoding: utf-8 -*- 2 | $:.push File.expand_path("../lib", __FILE__) 3 | require "mediaelement_rails/version" 4 | 5 | Gem::Specification.new do |s| 6 | s.name = "mediaelement_rails" 7 | s.version = MediaelementRails::VERSION 8 | s.authors = ["Mark Oleson", "Tobias Schlottke", "Pete Browne"] 9 | s.email = ["fusion2004@gmail.com", "tobias.schlottke@gmail.com", "me@petebrowne.com"] 10 | s.homepage = "https://github.com/tobsch/mediaelement_rails" 11 | s.summary = %q{MediaElement.js for Rails} 12 | s.description = %q{A MediaElement gem(engine) for Rails. Makes embedding HTML5 video easy.} 13 | s.license = "MIT" 14 | 15 | s.add_dependency "railties", ">= 3.1" 16 | s.add_dependency "jquery-rails", ">= 1.0" 17 | 18 | s.add_development_dependency "rails", ">= 3.1" 19 | s.add_development_dependency "i18n" 20 | s.add_development_dependency "turn" 21 | s.add_development_dependency "sqlite3" 22 | s.add_development_dependency "thor" 23 | s.add_development_dependency "rake" 24 | 25 | s.files = `git ls-files`.split("\n") 26 | s.test_files = `git ls-files -- {test,spec,features}/*`.split("\n") 27 | s.executables = `git ls-files -- bin/*`.split("\n").map{ |f| File.basename(f) } 28 | s.require_paths = ["lib"] 29 | end 30 | -------------------------------------------------------------------------------- /test/dummy/config/environments/test.rb: -------------------------------------------------------------------------------- 1 | Dummy::Application.configure do 2 | # Settings specified here will take precedence over those in config/application.rb 3 | 4 | # The test environment is used exclusively to run your application's 5 | # test suite. You never need to work with it otherwise. Remember that 6 | # your test database is "scratch space" for the test suite and is wiped 7 | # and recreated between test runs. Don't rely on the data there! 8 | config.cache_classes = true 9 | 10 | # Configure static asset server for tests with Cache-Control for performance 11 | config.serve_static_assets = true 12 | config.static_cache_control = "public, max-age=3600" 13 | 14 | # Log error messages when you accidentally call methods on nil 15 | config.whiny_nils = true 16 | 17 | # Show full error reports and disable caching 18 | config.consider_all_requests_local = true 19 | config.action_controller.perform_caching = false 20 | 21 | # Raise exceptions instead of rendering exception templates 22 | config.action_dispatch.show_exceptions = false 23 | 24 | # Disable request forgery protection in test environment 25 | config.action_controller.allow_forgery_protection = false 26 | 27 | # Use SQL instead of Active Record's schema dumper when creating the test database. 28 | # This is necessary if your schema can't be completely dumped by the schema dumper, 29 | # like if you have constraints or database-specific column types 30 | # config.active_record.schema_format = :sql 31 | 32 | # Print deprecation notices to the stderr 33 | config.active_support.deprecation = :stderr 34 | end 35 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | # MediaelementRails # 2 | 3 | This neat project brings the cool [MediaElement.js](http://mediaelementjs.com/) 2.16.4 (HTML5/Flash/Silverlight video player) to the Rails asset pipeline. __*NOTE:*__ This gem requires jquery to be included, which shouldn't be an issue. 4 | 5 | ## All you have to do is: ## 6 | 7 | Add the gem to the list of required gems in your `Gemfile`: 8 | 9 | ``` ruby 10 | # ... 11 | gem "mediaelement_rails" 12 | # ... 13 | ``` 14 | 15 | ### Javascript ### 16 | 17 | Load the Mediaelement Javascript in your `application.js`: 18 | 19 | ``` javascript 20 | //= require mediaelement_rails 21 | ``` 22 | 23 | ### And CSS ### 24 | 25 | Load the Mediaelement CSS in your `application.css`: 26 | 27 | ``` css 28 | /* 29 | *= require mediaelement_rails 30 | * and optionally: 31 | *= require mediaelement_rails/mejs-skins 32 | */ 33 | ``` 34 | 35 | ## Wanna use MediaElement (not the player) only? ## 36 | 37 | This is easy as hell too! 38 | Don't include any CSS and include the following in your `application.js` to get it working: 39 | 40 | ``` javascript 41 | //= require mediaelement_rails/rails 42 | ``` 43 | 44 | ## Anything else I should know? ## 45 | 46 | Nothing special! This project includes all assets you might need. 47 | 48 | ## Todo ## 49 | 50 | - Add support for `flashmediaelement-cdn.swf` for cases when the assets are hosted on a different domain than the rails application. 51 | - Setup [appraisal](https://github.com/thoughtbot/appraisal) gem to test against rails 3.x and 4.x 52 | 53 | ## Maintainers ## 54 | 55 | - [Mark Oleson](https://github.com/fusion2004) - current 56 | - [Tobias Schlottke](https://github.com/tobsch) 57 | - [Pete Browne](https://github.com/petebrowne) 58 | 59 | ## License ## 60 | 61 | This project rocks and uses MIT-LICENSE. 62 | -------------------------------------------------------------------------------- /test/dummy/config/application.rb: -------------------------------------------------------------------------------- 1 | require File.expand_path('../boot', __FILE__) 2 | 3 | require "rails/all" 4 | 5 | Bundler.require 6 | require "mediaelement_rails" 7 | 8 | module Dummy 9 | class Application < Rails::Application 10 | # Settings in config/environments/* take precedence over those specified here. 11 | # Application configuration should go into files in config/initializers 12 | # -- all .rb files in that directory are automatically loaded. 13 | 14 | # Custom directories with classes and modules you want to be autoloadable. 15 | # config.autoload_paths += %W(#{config.root}/extras) 16 | 17 | # Only load the plugins named here, in the order given (default is alphabetical). 18 | # :all can be used as a placeholder for all plugins not explicitly named. 19 | # config.plugins = [ :exception_notification, :ssl_requirement, :all ] 20 | 21 | # Activate observers that should always be running. 22 | # config.active_record.observers = :cacher, :garbage_collector, :forum_observer 23 | 24 | # Set Time.zone default to the specified zone and make Active Record auto-convert to this zone. 25 | # Run "rake -D time" for a list of tasks for finding time zone names. Default is UTC. 26 | # config.time_zone = 'Central Time (US & Canada)' 27 | 28 | # The default locale is :en and all translations from config/locales/*.rb,yml are auto loaded. 29 | # config.i18n.load_path += Dir[Rails.root.join('my', 'locales', '*.{rb,yml}').to_s] 30 | # config.i18n.default_locale = :de 31 | 32 | # Configure the default encoding used in templates for Ruby 1.9. 33 | config.encoding = "utf-8" 34 | 35 | # Configure sensitive parameters which will be filtered from the log file. 36 | config.filter_parameters += [:password] 37 | 38 | # Enable the asset pipeline 39 | config.assets.enabled = true 40 | end 41 | end 42 | 43 | -------------------------------------------------------------------------------- /test/dummy/config/environments/production.rb: -------------------------------------------------------------------------------- 1 | Dummy::Application.configure do 2 | # Settings specified here will take precedence over those in config/application.rb 3 | 4 | # Code is not reloaded between requests 5 | config.cache_classes = true 6 | 7 | # Full error reports are disabled and caching is turned on 8 | config.consider_all_requests_local = false 9 | config.action_controller.perform_caching = true 10 | 11 | # Disable Rails's static asset server (Apache or nginx will already do this) 12 | config.serve_static_assets = false 13 | 14 | # Compress JavaScripts and CSS 15 | config.assets.compress = true 16 | 17 | # Specifies the header that your server uses for sending files 18 | # (comment out if your front-end server doesn't support this) 19 | config.action_dispatch.x_sendfile_header = "X-Sendfile" # Use 'X-Accel-Redirect' for nginx 20 | 21 | # Force all access to the app over SSL, use Strict-Transport-Security, and use secure cookies. 22 | # config.force_ssl = true 23 | 24 | # See everything in the log (default is :info) 25 | # config.log_level = :debug 26 | 27 | # Use a different logger for distributed setups 28 | # config.logger = SyslogLogger.new 29 | 30 | # Use a different cache store in production 31 | # config.cache_store = :mem_cache_store 32 | 33 | # Enable serving of images, stylesheets, and JavaScripts from an asset server 34 | # config.action_controller.asset_host = "http://assets.example.com" 35 | 36 | # Precompile additional assets (application.js, application.css, and all non-JS/CSS are already added) 37 | # config.assets.precompile += %w( search.js ) 38 | 39 | # Disable delivery errors, bad email addresses will be ignored 40 | # config.action_mailer.raise_delivery_errors = false 41 | 42 | # Enable threaded mode 43 | # config.threadsafe! 44 | 45 | # Enable locale fallbacks for I18n (makes lookups for any locale fall back to 46 | # the I18n.default_locale when a translation can not be found) 47 | config.i18n.fallbacks = true 48 | 49 | # Send deprecation notices to registered listeners 50 | config.active_support.deprecation = :notify 51 | end 52 | -------------------------------------------------------------------------------- /test/integration/assets_test.rb: -------------------------------------------------------------------------------- 1 | require "test_helper" 2 | 3 | class AssetsTest < ActionDispatch::IntegrationTest 4 | 5 | test "includes full library" do 6 | get "/assets/mediaelement-and-player.js" 7 | assert_response :success 8 | assert content_type("text/javascript") 9 | assert response_includes?("var mejs = mejs || {}") 10 | assert response_includes?("mejs.MediaElementPlayer.prototype = {") 11 | end 12 | 13 | test "includes only mediaelement" do 14 | get "/assets/mediaelement-without-player.js" 15 | assert_response :success 16 | assert content_type("text/javascript") 17 | assert response_includes?("var mejs = mejs || {}") 18 | assert !response_includes?("mejs.MediaElementPlayer.prototype = {") 19 | end 20 | 21 | test "includes player stylesheet" do 22 | get "/assets/player.css" 23 | assert_response :success 24 | assert content_type("text/css") 25 | assert response_includes?(".mejs-container {") 26 | assert response_includes?(".mejs-mediaelement {") 27 | end 28 | 29 | test "includes player skins stylesheet" do 30 | get "/assets/player-skins.css" 31 | assert_response :success 32 | assert content_type("text/css") 33 | assert response_includes?(".mejs-container.mejs-ted {") 34 | assert response_includes?(".mejs-container.mejs-wmp {") 35 | end 36 | 37 | test "includes flash plugin" do 38 | get "/assets/mediaelement_rails/flashmediaelement.swf" 39 | assert_response :success 40 | assert content_type("application/x-shockwave-flash") 41 | end 42 | 43 | test "includes silverlight plugin" do 44 | get "/assets/mediaelement_rails/silverlightmediaelement.xap" 45 | assert_response :success 46 | assert content_type("application/x-silverlight-app") 47 | end 48 | 49 | { 50 | "background.png" => "image/png", 51 | "bigplay.png" => "image/png", 52 | "controls-ted.png" => "image/png", 53 | "controls-wmp-bg.png" => "image/png", 54 | "controls-wmp.png" => "image/png", 55 | "controls.png" => "image/png", 56 | "loading.gif" => "image/gif" 57 | }.each do |image, type| 58 | test "includes #{image[0..-5]} image" do 59 | get "/assets/mediaelement_rails/#{image}" 60 | assert_response :success 61 | assert content_type(type) 62 | end 63 | end 64 | 65 | # Returns true if the response includes the given content 66 | def response_includes?(content) 67 | @response.body.include?(content) 68 | end 69 | 70 | # Returns true if the response is of the given content type 71 | def content_type(type) 72 | @response.content_type == type 73 | end 74 | end 75 | 76 | -------------------------------------------------------------------------------- /mediaelement_rails.thor: -------------------------------------------------------------------------------- 1 | # encoding: utf-8 2 | 3 | module MediaelementRails 4 | class Updater < Thor 5 | include Thor::Actions 6 | namespace "mediaelement_rails" 7 | 8 | UPDATE_FILES = { 9 | "mediaelement.js" => "javascripts", 10 | "mediaelementplayer.js" => "javascripts", 11 | "mediaelementplayer.css" => "stylesheets", 12 | "mejs-skins.css" => "stylesheets", 13 | "*.{svg,png,gif}" => "images", 14 | "*.{swf,xap}" => "plugins" 15 | } 16 | 17 | TRANSFORMATIONS = { 18 | "**/*.css.erb" => :add_asset_path_helper, 19 | "**/*.js" => :remove_weird_characters 20 | } 21 | 22 | def self.source_root 23 | File.expand_path("..", __FILE__) 24 | end 25 | 26 | desc "update", "Update the MediaElement.js files" 27 | method_option "vendor_path", 28 | :desc => "Path to the the MediaElement.js git repo", 29 | :default => "vendor/mediaelement", 30 | :aliases => %w(-v) 31 | method_option "assets_path", 32 | :desc => "Path to the the mediaelement_rails assets", 33 | :default => "app/assets", 34 | :aliases => %w(-a) 35 | method_option "git", 36 | :desc => "URL of the MediaElement.js git repo to clone", 37 | :default => "http://github.com/johndyer/mediaelement.git", 38 | :aliases => %w(-g) 39 | method_option "tag", 40 | :desc => "The tag to checkout in the MediaElement.js git repo", 41 | :default => "master", 42 | :aliases => %w(-t) 43 | def update 44 | assets_path = options[:assets_path] 45 | vendor_path = options[:vendor_path] 46 | 47 | # Update the vendored MediaElement.js 48 | run "git clone #{options[:git]} #{vendor_path}", :capture => true unless File.directory? vendor_path 49 | run "cd #{vendor_path} && git pull origin master", :capture => true 50 | run "cd #{vendor_path} && git checkout #{options[:tag]}", :capture => true 51 | 52 | # Then copy the files we need to their correct locations 53 | UPDATE_FILES.each do |matcher, path| 54 | Dir[File.join(vendor_path, "build", matcher)].each do |file| 55 | new_name = File.join assets_path, path, "mediaelement_rails", File.basename(file) 56 | new_name << ".erb" if file =~ /\.css$/ 57 | copy_file file, new_name 58 | end 59 | end 60 | 61 | # Peform any transformations necessary to the files 62 | TRANSFORMATIONS.each do |matcher, transformation| 63 | Dir[File.join(assets_path, matcher)].each do |file| 64 | content = File.binread file 65 | content = send(transformation, content) 66 | File.open(file, "wb") { |file| file.write(content) } 67 | end 68 | end 69 | end 70 | 71 | protected 72 | 73 | # Replaces `url(...)` with url(<%= asset_path "..." %>) in CSS files. 74 | def add_asset_path_helper(content) 75 | content.gsub /url\((.*?)\)/, 'url(<%= asset_path "mediaelement_rails/\1" %>)' 76 | end 77 | 78 | # Removes the weird unicode character from the MediaElement source files. 79 | def remove_weird_characters(content) 80 | content.force_encoding('utf-8').gsub //, '' 81 | end 82 | end 83 | end 84 | -------------------------------------------------------------------------------- /app/assets/stylesheets/mediaelement_rails/mejs-skins.css.erb: -------------------------------------------------------------------------------- 1 | /* TED player */ 2 | .mejs-container.mejs-ted { 3 | 4 | } 5 | .mejs-ted .mejs-controls { 6 | background: #eee; 7 | height: 65px; 8 | } 9 | 10 | .mejs-ted .mejs-button, 11 | .mejs-ted .mejs-time { 12 | position: absolute; 13 | background: #ddd; 14 | } 15 | .mejs-ted .mejs-controls .mejs-time-rail .mejs-time-total { 16 | background-color: none; 17 | background: url(<%= asset_path "mediaelement_rails/controls-ted.png" %>) repeat-x 0 -52px; 18 | height: 6px; 19 | } 20 | .mejs-ted .mejs-controls .mejs-time-rail .mejs-time-buffering { 21 | height: 6px; 22 | } 23 | .mejs-ted .mejs-controls .mejs-time-rail .mejs-time-loaded { 24 | background-color: none; 25 | background: url(<%= asset_path "mediaelement_rails/controls-ted.png" %>) repeat-x 0 -52px; 26 | width: 0; 27 | height: 6px; 28 | } 29 | .mejs-ted .mejs-controls .mejs-time-rail .mejs-time-current { 30 | width: 0; 31 | height: 6px; 32 | background-color: none; 33 | background: url(<%= asset_path "mediaelement_rails/controls-ted.png" %>) repeat-x 0 -59px; 34 | } 35 | .mejs-ted .mejs-controls .mejs-time-rail .mejs-time-handle { 36 | display: block; 37 | margin: 0; 38 | width: 14px; 39 | height: 21px; 40 | top: -7px; 41 | border: 0; 42 | background: url(<%= asset_path "mediaelement_rails/controls-ted.png" %>) no-repeat 0 0; 43 | } 44 | .mejs-ted .mejs-controls .mejs-time-rail .mejs-time-float { 45 | display: none; 46 | } 47 | .mejs-ted .mejs-controls .mejs-playpause-button { 48 | top: 29px; 49 | left: 9px; 50 | width: 49px; 51 | height: 28px; 52 | } 53 | .mejs-ted .mejs-controls .mejs-playpause-button button { 54 | width: 49px; 55 | height: 28px; 56 | background: url(<%= asset_path "mediaelement_rails/controls-ted.png" %>) no-repeat -50px -23px; 57 | margin: 0; 58 | padding: 0; 59 | } 60 | .mejs-ted .mejs-controls .mejs-pause button { 61 | background-position: 0 -23px; 62 | } 63 | 64 | .mejs-ted .mejs-controls .mejs-fullscreen-button { 65 | top: 34px; 66 | right: 9px; 67 | width: 17px; 68 | height: 15px; 69 | background : none; 70 | } 71 | .mejs-ted .mejs-controls .mejs-fullscreen-button button { 72 | width: 19px; 73 | height: 17px; 74 | background: transparent url(<%= asset_path "mediaelement_rails/controls-ted.png" %>) no-repeat 0 -66px; 75 | margin: 0; 76 | padding: 0; 77 | } 78 | .mejs-ted .mejs-controls .mejs-unfullscreen button { 79 | background: transparent url(<%= asset_path "mediaelement_rails/controls-ted.png" %>) no-repeat -21px -66px; 80 | margin: 0; 81 | padding: 0; 82 | } 83 | .mejs-ted .mejs-controls .mejs-volume-button { 84 | top: 30px; 85 | right: 35px; 86 | width: 24px; 87 | height: 22px; 88 | } 89 | .mejs-ted .mejs-controls .mejs-mute button { 90 | background: url(<%= asset_path "mediaelement_rails/controls-ted.png" %>) no-repeat -15px 0; 91 | width: 24px; 92 | height: 22px; 93 | margin: 0; 94 | padding: 0; 95 | } 96 | .mejs-ted .mejs-controls .mejs-unmute button { 97 | background: url(<%= asset_path "mediaelement_rails/controls-ted.png" %>) no-repeat -40px 0; 98 | width: 24px; 99 | height: 22px; 100 | margin: 0; 101 | padding: 0; 102 | } 103 | .mejs-ted .mejs-controls .mejs-volume-button .mejs-volume-slider { 104 | background: #fff; 105 | border: solid 1px #aaa; 106 | border-width: 1px 1px 0 1px; 107 | width: 22px; 108 | height: 65px; 109 | top: -65px; 110 | } 111 | .mejs-ted .mejs-controls .mejs-volume-button .mejs-volume-total { 112 | background: url(<%= asset_path "mediaelement_rails/controls-ted.png" %>) repeat-y -41px -66px; 113 | left: 8px; 114 | width: 6px; 115 | height: 50px; 116 | } 117 | .mejs-ted .mejs-controls .mejs-volume-button .mejs-volume-current { 118 | left: 8px; 119 | width: 6px; 120 | background: url(<%= asset_path "mediaelement_rails/controls-ted.png" %>) repeat-y -48px -66px; 121 | height: 50px; 122 | } 123 | 124 | .mejs-ted .mejs-controls .mejs-volume-button .mejs-volume-handle { 125 | display: none; 126 | } 127 | 128 | .mejs-ted .mejs-controls .mejs-time span { 129 | color: #333; 130 | } 131 | .mejs-ted .mejs-controls .mejs-currenttime-container { 132 | position: absolute; 133 | top: 32px; 134 | right: 100px; 135 | border: solid 1px #999; 136 | background: #fff; 137 | color: #333; 138 | padding-top: 2px; 139 | border-radius: 3px; 140 | color: #333; 141 | } 142 | .mejs-ted .mejs-controls .mejs-duration-container { 143 | 144 | position: absolute; 145 | top: 32px; 146 | right: 65px; 147 | border: solid 1px #999; 148 | background: #fff; 149 | color: #333; 150 | padding-top: 2px; 151 | border-radius: 3px; 152 | color: #333; 153 | } 154 | 155 | .mejs-ted .mejs-controls .mejs-time button{ 156 | color: #333; 157 | } 158 | .mejs-ted .mejs-controls .mejs-captions-button { 159 | display: none; 160 | } 161 | /* END: TED player */ 162 | 163 | 164 | /* WMP player */ 165 | .mejs-container.mejs-wmp { 166 | 167 | } 168 | .mejs-wmp .mejs-controls { 169 | background: transparent url(<%= asset_path "mediaelement_rails/controls-wmp-bg.png" %>) center 16px no-repeat; 170 | height: 65px; 171 | } 172 | 173 | .mejs-wmp .mejs-button, 174 | .mejs-wmp .mejs-time { 175 | position: absolute; 176 | background: transparent; 177 | } 178 | .mejs-wmp .mejs-controls .mejs-time-rail .mejs-time-total { 179 | background-color: transparent; 180 | border: solid 1px #ccc; 181 | height: 3px; 182 | } 183 | .mejs-wmp .mejs-controls .mejs-time-rail .mejs-time-buffering { 184 | height: 3px; 185 | } 186 | .mejs-wmp .mejs-controls .mejs-time-rail .mejs-time-loaded { 187 | background-color: rgba(255,255,255,0.3); 188 | width: 0; 189 | height: 3px; 190 | } 191 | .mejs-wmp .mejs-controls .mejs-time-rail .mejs-time-current { 192 | width: 0; 193 | height: 1px; 194 | background-color: #014CB6; 195 | border: solid 1px #7FC9FA; 196 | border-width: 1px 0; 197 | border-color: #7FC9FA #fff #619FF2 #fff; 198 | } 199 | .mejs-wmp .mejs-controls .mejs-time-rail .mejs-time-handle { 200 | display: block; 201 | margin: 0; 202 | width: 16px; 203 | height: 9px; 204 | top: -3px; 205 | border: 0; 206 | background: url(<%= asset_path "mediaelement_rails/controls-wmp.png" %>) no-repeat 0 -80px; 207 | } 208 | .mejs-wmp .mejs-controls .mejs-time-rail .mejs-time-float { 209 | display: none; 210 | } 211 | .mejs-wmp .mejs-controls .mejs-playpause-button { 212 | top: 10px; 213 | left: 50%; 214 | margin: 10px 0 0 -20px; 215 | width: 40px; 216 | height: 40px; 217 | 218 | } 219 | .mejs-wmp .mejs-controls .mejs-playpause-button button { 220 | width: 40px; 221 | height: 40px; 222 | background: url(<%= asset_path "mediaelement_rails/controls-wmp.png" %>) no-repeat 0 0; 223 | margin: 0; 224 | padding: 0; 225 | } 226 | .mejs-wmp .mejs-controls .mejs-pause button { 227 | background-position: 0 -40px; 228 | } 229 | 230 | .mejs-wmp .mejs-controls .mejs-currenttime-container { 231 | position: absolute; 232 | top: 25px; 233 | left: 50%; 234 | margin-left: -93px; 235 | } 236 | .mejs-wmp .mejs-controls .mejs-duration-container { 237 | position: absolute; 238 | top: 25px; 239 | left: 50%; 240 | margin-left: -58px; 241 | } 242 | 243 | 244 | .mejs-wmp .mejs-controls .mejs-volume-button { 245 | top: 32px; 246 | right: 50%; 247 | margin-right: -55px; 248 | width: 20px; 249 | height: 15px; 250 | } 251 | .mejs-wmp .mejs-controls .mejs-volume-button button { 252 | margin: 0; 253 | padding: 0; 254 | background: url(<%= asset_path "mediaelement_rails/controls-wmp.png" %>) no-repeat -42px -17px; 255 | width: 20px; 256 | height: 15px; 257 | } 258 | .mejs-wmp .mejs-controls .mejs-unmute button { 259 | margin: 0; 260 | padding: 0; 261 | background: url(<%= asset_path "mediaelement_rails/controls-wmp.png" %>) no-repeat -42px 0; 262 | width: 20px; 263 | height: 15px; 264 | } 265 | .mejs-wmp .mejs-controls .mejs-volume-button .mejs-volume-slider { 266 | background: rgba(102,102,102,0.6); 267 | } 268 | 269 | .mejs-wmp .mejs-controls .mejs-fullscreen-button { 270 | top: 32px; 271 | right: 50%; 272 | margin-right: -82px; 273 | width: 15px; 274 | height: 14px; 275 | } 276 | .mejs-wmp .mejs-controls .mejs-fullscreen-button button { 277 | margin: 0; 278 | padding: 0; 279 | background: url(<%= asset_path "mediaelement_rails/controls-wmp.png" %>) no-repeat -63px 0; 280 | width: 15px; 281 | height: 14px; 282 | } 283 | .mejs-wmp .mejs-controls .mejs-captions-button { 284 | display: none; 285 | } 286 | /* END: WMP player */ 287 | 288 | 289 | 290 | -------------------------------------------------------------------------------- /app/assets/images/mediaelement_rails/controls.svg: -------------------------------------------------------------------------------- 1 | cc -------------------------------------------------------------------------------- /app/assets/stylesheets/mediaelement_rails/mediaelementplayer.css.erb: -------------------------------------------------------------------------------- 1 | .mejs-offscreen{ 2 | /* Accessibility: hide screen reader texts (and prefer "top" for RTL languages). */ 3 | position: absolute !important; 4 | top: -10000px; 5 | left: -10000px; 6 | overflow: hidden; 7 | width: 1px; 8 | height: 1px; 9 | } 10 | 11 | .mejs-container { 12 | position: relative; 13 | background: #000; 14 | font-family: Helvetica, Arial; 15 | text-align: left; 16 | vertical-align: top; 17 | text-indent: 0; 18 | } 19 | 20 | .mejs-container:focus { 21 | outline: none; 22 | } 23 | 24 | .me-plugin { 25 | position: absolute; 26 | } 27 | 28 | .mejs-embed, .mejs-embed body { 29 | width: 100%; 30 | height: 100%; 31 | margin: 0; 32 | padding: 0; 33 | background: #000; 34 | overflow: hidden; 35 | } 36 | 37 | .mejs-fullscreen { 38 | /* set it to not show scroll bars so 100% will work */ 39 | overflow: hidden !important; 40 | } 41 | 42 | .mejs-container-fullscreen { 43 | position: fixed; 44 | left: 0; 45 | top: 0; 46 | right: 0; 47 | bottom: 0; 48 | overflow: hidden; 49 | z-index: 1000; 50 | } 51 | .mejs-container-fullscreen .mejs-mediaelement, 52 | .mejs-container-fullscreen video { 53 | width: 100%; 54 | height: 100%; 55 | } 56 | 57 | .mejs-clear { 58 | clear: both; 59 | } 60 | 61 | /* Start: LAYERS */ 62 | .mejs-background { 63 | position: absolute; 64 | top: 0; 65 | left: 0; 66 | } 67 | 68 | .mejs-mediaelement { 69 | position: absolute; 70 | top: 0; 71 | left: 0; 72 | width: 100%; 73 | height: 100%; 74 | } 75 | 76 | .mejs-poster { 77 | position: absolute; 78 | top: 0; 79 | left: 0; 80 | background-size: contain ; 81 | background-position: 50% 50% ; 82 | background-repeat: no-repeat ; 83 | } 84 | :root .mejs-poster img { 85 | display: none ; 86 | } 87 | 88 | .mejs-poster img { 89 | border: 0; 90 | padding: 0; 91 | border: 0; 92 | } 93 | 94 | .mejs-overlay { 95 | position: absolute; 96 | top: 0; 97 | left: 0; 98 | } 99 | 100 | .mejs-overlay-play { 101 | cursor: pointer; 102 | } 103 | 104 | .mejs-overlay-button { 105 | position: absolute; 106 | top: 50%; 107 | left: 50%; 108 | width: 100px; 109 | height: 100px; 110 | margin: -50px 0 0 -50px; 111 | background: url(<%= asset_path "mediaelement_rails/bigplay.svg" %>) no-repeat; 112 | } 113 | 114 | .no-svg .mejs-overlay-button { 115 | background-image: url(<%= asset_path "mediaelement_rails/bigplay.png" %>); 116 | } 117 | 118 | .mejs-overlay:hover .mejs-overlay-button { 119 | background-position: 0 -100px ; 120 | } 121 | 122 | .mejs-overlay-loading { 123 | position: absolute; 124 | top: 50%; 125 | left: 50%; 126 | width: 80px; 127 | height: 80px; 128 | margin: -40px 0 0 -40px; 129 | background: #333; 130 | background: url(<%= asset_path "mediaelement_rails/background.png" %>); 131 | background: rgba(0, 0, 0, 0.9); 132 | background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(rgba(50,50,50,0.9)), to(rgba(0,0,0,0.9))); 133 | background: -webkit-linear-gradient(top, rgba(50,50,50,0.9), rgba(0,0,0,0.9)); 134 | background: -moz-linear-gradient(top, rgba(50,50,50,0.9), rgba(0,0,0,0.9)); 135 | background: -o-linear-gradient(top, rgba(50,50,50,0.9), rgba(0,0,0,0.9)); 136 | background: -ms-linear-gradient(top, rgba(50,50,50,0.9), rgba(0,0,0,0.9)); 137 | background: linear-gradient(rgba(50,50,50,0.9), rgba(0,0,0,0.9)); 138 | } 139 | 140 | .mejs-overlay-loading span { 141 | display: block; 142 | width: 80px; 143 | height: 80px; 144 | background: transparent url(<%= asset_path "mediaelement_rails/loading.gif" %>) 50% 50% no-repeat; 145 | } 146 | 147 | /* End: LAYERS */ 148 | 149 | /* Start: CONTROL BAR */ 150 | .mejs-container .mejs-controls { 151 | position: absolute; 152 | list-style-type: none; 153 | margin: 0; 154 | padding: 0; 155 | bottom: 0; 156 | left: 0; 157 | background: url(<%= asset_path "mediaelement_rails/background.png" %>); 158 | background: rgba(0, 0, 0, 0.7); 159 | background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(rgba(50,50,50,0.7)), to(rgba(0,0,0,0.7))); 160 | background: -webkit-linear-gradient(top, rgba(50,50,50,0.7), rgba(0,0,0,0.7)); 161 | background: -moz-linear-gradient(top, rgba(50,50,50,0.7), rgba(0,0,0,0.7)); 162 | background: -o-linear-gradient(top, rgba(50,50,50,0.7), rgba(0,0,0,0.7)); 163 | background: -ms-linear-gradient(top, rgba(50,50,50,0.7), rgba(0,0,0,0.7)); 164 | background: linear-gradient(rgba(50,50,50,0.7), rgba(0,0,0,0.7)); 165 | height: 30px; 166 | width: 100%; 167 | } 168 | .mejs-container .mejs-controls div { 169 | list-style-type: none; 170 | background-image: none; 171 | display: block; 172 | float: left; 173 | margin: 0; 174 | padding: 0; 175 | width: 26px; 176 | height: 26px; 177 | font-size: 11px; 178 | line-height: 11px; 179 | font-family: Helvetica, Arial; 180 | border: 0; 181 | } 182 | 183 | .mejs-controls .mejs-button button { 184 | cursor: pointer; 185 | display: block; 186 | font-size: 0; 187 | line-height: 0; 188 | text-decoration: none; 189 | margin: 7px 5px; 190 | padding: 0; 191 | position: absolute; 192 | height: 16px; 193 | width: 16px; 194 | border: 0; 195 | background: transparent url(<%= asset_path "mediaelement_rails/controls.svg" %>) no-repeat; 196 | } 197 | 198 | .no-svg .mejs-controls .mejs-button button { 199 | background-image: url(<%= asset_path "mediaelement_rails/controls.png" %>); 200 | } 201 | 202 | /* :focus for accessibility */ 203 | .mejs-controls .mejs-button button:focus { 204 | outline: dotted 1px #999; 205 | } 206 | 207 | /* End: CONTROL BAR */ 208 | 209 | /* Start: Time (Current / Duration) */ 210 | .mejs-container .mejs-controls .mejs-time { 211 | color: #fff; 212 | display: block; 213 | height: 17px; 214 | width: auto; 215 | padding: 10px 3px 0 3px ; 216 | overflow: hidden; 217 | text-align: center; 218 | -moz-box-sizing: content-box; 219 | -webkit-box-sizing: content-box; 220 | box-sizing: content-box; 221 | } 222 | 223 | .mejs-container .mejs-controls .mejs-time a { 224 | color: #fff; 225 | font-size: 11px; 226 | line-height: 12px; 227 | display: block; 228 | float: left; 229 | margin: 1px 2px 0 0; 230 | width: auto; 231 | } 232 | /* End: Time (Current / Duration) */ 233 | 234 | /* Start: Play/Pause/Stop */ 235 | .mejs-controls .mejs-play button { 236 | background-position: 0 0; 237 | } 238 | 239 | .mejs-controls .mejs-pause button { 240 | background-position: 0 -16px; 241 | } 242 | 243 | .mejs-controls .mejs-stop button { 244 | background-position: -112px 0; 245 | } 246 | /* Start: Play/Pause/Stop */ 247 | 248 | /* Start: Progress Bar */ 249 | .mejs-controls div.mejs-time-rail { 250 | direction: ltr; 251 | width: 200px; 252 | padding-top: 5px; 253 | } 254 | 255 | .mejs-controls .mejs-time-rail span, .mejs-controls .mejs-time-rail a { 256 | display: block; 257 | position: absolute; 258 | width: 180px; 259 | height: 10px; 260 | -webkit-border-radius: 2px; 261 | -moz-border-radius: 2px; 262 | border-radius: 2px; 263 | cursor: pointer; 264 | } 265 | 266 | .mejs-controls .mejs-time-rail .mejs-time-total { 267 | margin: 5px; 268 | background: #333; 269 | background: rgba(50,50,50,0.8); 270 | background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(rgba(30,30,30,0.8)), to(rgba(60,60,60,0.8))); 271 | background: -webkit-linear-gradient(top, rgba(30,30,30,0.8), rgba(60,60,60,0.8)); 272 | background: -moz-linear-gradient(top, rgba(30,30,30,0.8), rgba(60,60,60,0.8)); 273 | background: -o-linear-gradient(top, rgba(30,30,30,0.8), rgba(60,60,60,0.8)); 274 | background: -ms-linear-gradient(top, rgba(30,30,30,0.8), rgba(60,60,60,0.8)); 275 | background: linear-gradient(rgba(30,30,30,0.8), rgba(60,60,60,0.8)); 276 | } 277 | 278 | .mejs-controls .mejs-time-rail .mejs-time-buffering { 279 | width: 100%; 280 | background-image: -o-linear-gradient(-45deg, rgba(255, 255, 255, 0.15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.15) 50%, rgba(255, 255, 255, 0.15) 75%, transparent 75%, transparent); 281 | background-image: -webkit-gradient(linear, 0 100%, 100% 0, color-stop(0.25, rgba(255, 255, 255, 0.15)), color-stop(0.25, transparent), color-stop(0.5, transparent), color-stop(0.5, rgba(255, 255, 255, 0.15)), color-stop(0.75, rgba(255, 255, 255, 0.15)), color-stop(0.75, transparent), to(transparent)); 282 | background-image: -webkit-linear-gradient(-45deg, rgba(255, 255, 255, 0.15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.15) 50%, rgba(255, 255, 255, 0.15) 75%, transparent 75%, transparent); 283 | background-image: -moz-linear-gradient(-45deg, rgba(255, 255, 255, 0.15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.15) 50%, rgba(255, 255, 255, 0.15) 75%, transparent 75%, transparent); 284 | background-image: -ms-linear-gradient(-45deg, rgba(255, 255, 255, 0.15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.15) 50%, rgba(255, 255, 255, 0.15) 75%, transparent 75%, transparent); 285 | background-image: linear-gradient(-45deg, rgba(255, 255, 255, 0.15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.15) 50%, rgba(255, 255, 255, 0.15) 75%, transparent 75%, transparent); 286 | -webkit-background-size: 15px 15px; 287 | -moz-background-size: 15px 15px; 288 | -o-background-size: 15px 15px; 289 | background-size: 15px 15px; 290 | -webkit-animation: buffering-stripes 2s linear infinite; 291 | -moz-animation: buffering-stripes 2s linear infinite; 292 | -ms-animation: buffering-stripes 2s linear infinite; 293 | -o-animation: buffering-stripes 2s linear infinite; 294 | animation: buffering-stripes 2s linear infinite; 295 | } 296 | 297 | @-webkit-keyframes buffering-stripes { from {background-position: 0 0;} to {background-position: 30px 0;} } 298 | @-moz-keyframes buffering-stripes { from {background-position: 0 0;} to {background-position: 30px 0;} } 299 | @-ms-keyframes buffering-stripes { from {background-position: 0 0;} to {background-position: 30px 0;} } 300 | @-o-keyframes buffering-stripes { from {background-position: 0 0;} to {background-position: 30px 0;} } 301 | @keyframes buffering-stripes { from {background-position: 0 0;} to {background-position: 30px 0;} } 302 | 303 | .mejs-controls .mejs-time-rail .mejs-time-loaded { 304 | background: #3caac8; 305 | background: rgba(60,170,200,0.8); 306 | background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(rgba(44,124,145,0.8)), to(rgba(78,183,212,0.8))); 307 | background: -webkit-linear-gradient(top, rgba(44,124,145,0.8), rgba(78,183,212,0.8)); 308 | background: -moz-linear-gradient(top, rgba(44,124,145,0.8), rgba(78,183,212,0.8)); 309 | background: -o-linear-gradient(top, rgba(44,124,145,0.8), rgba(78,183,212,0.8)); 310 | background: -ms-linear-gradient(top, rgba(44,124,145,0.8), rgba(78,183,212,0.8)); 311 | background: linear-gradient(rgba(44,124,145,0.8), rgba(78,183,212,0.8)); 312 | width: 0; 313 | } 314 | 315 | .mejs-controls .mejs-time-rail .mejs-time-current { 316 | background: #fff; 317 | background: rgba(255,255,255,0.8); 318 | background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(rgba(255,255,255,0.9)), to(rgba(200,200,200,0.8))); 319 | background: -webkit-linear-gradient(top, rgba(255,255,255,0.9), rgba(200,200,200,0.8)); 320 | background: -moz-linear-gradient(top, rgba(255,255,255,0.9), rgba(200,200,200,0.8)); 321 | background: -o-linear-gradient(top, rgba(255,255,255,0.9), rgba(200,200,200,0.8)); 322 | background: -ms-linear-gradient(top, rgba(255,255,255,0.9), rgba(200,200,200,0.8)); 323 | background: linear-gradient(rgba(255,255,255,0.9), rgba(200,200,200,0.8)); 324 | width: 0; 325 | } 326 | 327 | .mejs-controls .mejs-time-rail .mejs-time-handle { 328 | display: none; 329 | position: absolute; 330 | margin: 0; 331 | width: 10px; 332 | background: #fff; 333 | -webkit-border-radius: 5px; 334 | -moz-border-radius: 5px; 335 | border-radius: 5px; 336 | cursor: pointer; 337 | border: solid 2px #333; 338 | top: -2px; 339 | text-align: center; 340 | } 341 | 342 | .mejs-controls .mejs-time-rail .mejs-time-float { 343 | position: absolute; 344 | display: none; 345 | background: #eee; 346 | width: 36px; 347 | height: 17px; 348 | border: solid 1px #333; 349 | top: -26px; 350 | margin-left: -18px; 351 | text-align: center; 352 | color: #111; 353 | } 354 | 355 | .mejs-controls .mejs-time-rail .mejs-time-float-current { 356 | margin: 2px; 357 | width: 30px; 358 | display: block; 359 | text-align: center; 360 | left: 0; 361 | } 362 | 363 | .mejs-controls .mejs-time-rail .mejs-time-float-corner { 364 | position: absolute; 365 | display: block; 366 | width: 0; 367 | height: 0; 368 | line-height: 0; 369 | border: solid 5px #eee; 370 | border-color: #eee transparent transparent transparent; 371 | -webkit-border-radius: 0; 372 | -moz-border-radius: 0; 373 | border-radius: 0; 374 | top: 15px; 375 | left: 13px; 376 | } 377 | 378 | .mejs-long-video .mejs-controls .mejs-time-rail .mejs-time-float { 379 | width: 48px; 380 | } 381 | 382 | .mejs-long-video .mejs-controls .mejs-time-rail .mejs-time-float-current { 383 | width: 44px; 384 | } 385 | 386 | .mejs-long-video .mejs-controls .mejs-time-rail .mejs-time-float-corner { 387 | left: 18px; 388 | } 389 | 390 | /* 391 | .mejs-controls .mejs-time-rail:hover .mejs-time-handle { 392 | visibility:visible; 393 | } 394 | */ 395 | /* End: Progress Bar */ 396 | 397 | /* Start: Fullscreen */ 398 | .mejs-controls .mejs-fullscreen-button button { 399 | background-position: -32px 0; 400 | } 401 | 402 | .mejs-controls .mejs-unfullscreen button { 403 | background-position: -32px -16px; 404 | } 405 | /* End: Fullscreen */ 406 | 407 | 408 | /* Start: Mute/Volume */ 409 | .mejs-controls .mejs-volume-button { 410 | } 411 | 412 | .mejs-controls .mejs-mute button { 413 | background-position: -16px -16px; 414 | } 415 | 416 | .mejs-controls .mejs-unmute button { 417 | background-position: -16px 0; 418 | } 419 | 420 | .mejs-controls .mejs-volume-button { 421 | position: relative; 422 | } 423 | 424 | .mejs-controls .mejs-volume-button .mejs-volume-slider { 425 | display: none; 426 | height: 115px; 427 | width: 25px; 428 | background: url(<%= asset_path "mediaelement_rails/background.png" %>); 429 | background: rgba(50, 50, 50, 0.7); 430 | -webkit-border-radius: 0; 431 | -moz-border-radius: 0; 432 | border-radius: 0; 433 | top: -115px; 434 | left: 0; 435 | z-index: 1; 436 | position: absolute; 437 | margin: 0; 438 | } 439 | 440 | .mejs-controls .mejs-volume-button:hover { 441 | -webkit-border-radius: 0 0 4px 4px; 442 | -moz-border-radius: 0 0 4px 4px; 443 | border-radius: 0 0 4px 4px; 444 | } 445 | 446 | /* 447 | .mejs-controls .mejs-volume-button:hover .mejs-volume-slider { 448 | display: block; 449 | } 450 | */ 451 | 452 | .mejs-controls .mejs-volume-button .mejs-volume-slider .mejs-volume-total { 453 | position: absolute; 454 | left: 11px; 455 | top: 8px; 456 | width: 2px; 457 | height: 100px; 458 | background: #ddd; 459 | background: rgba(255, 255, 255, 0.5); 460 | margin: 0; 461 | } 462 | 463 | .mejs-controls .mejs-volume-button .mejs-volume-slider .mejs-volume-current { 464 | position: absolute; 465 | left: 11px; 466 | top: 8px; 467 | width: 2px; 468 | height: 100px; 469 | background: #ddd; 470 | background: rgba(255, 255, 255, 0.9); 471 | margin: 0; 472 | } 473 | 474 | .mejs-controls .mejs-volume-button .mejs-volume-slider .mejs-volume-handle { 475 | position: absolute; 476 | left: 4px; 477 | top: -3px; 478 | width: 16px; 479 | height: 6px; 480 | background: #ddd; 481 | background: rgba(255, 255, 255, 0.9); 482 | cursor: N-resize; 483 | -webkit-border-radius: 1px; 484 | -moz-border-radius: 1px; 485 | border-radius: 1px; 486 | margin: 0; 487 | } 488 | 489 | /* horizontal version */ 490 | .mejs-controls a.mejs-horizontal-volume-slider { 491 | height: 26px; 492 | width: 56px; 493 | position: relative; 494 | display: block; 495 | float: left; 496 | vertical-align: middle; 497 | } 498 | 499 | .mejs-controls .mejs-horizontal-volume-slider .mejs-horizontal-volume-total { 500 | position: absolute; 501 | left: 0; 502 | top: 11px; 503 | width: 50px; 504 | height: 8px; 505 | margin: 0; 506 | padding: 0; 507 | font-size: 1px; 508 | -webkit-border-radius: 2px; 509 | -moz-border-radius: 2px; 510 | border-radius: 2px; 511 | background: #333; 512 | background: rgba(50,50,50,0.8); 513 | background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(rgba(30,30,30,0.8)), to(rgba(60,60,60,0.8))); 514 | background: -webkit-linear-gradient(top, rgba(30,30,30,0.8), rgba(60,60,60,0.8)); 515 | background: -moz-linear-gradient(top, rgba(30,30,30,0.8), rgba(60,60,60,0.8)); 516 | background: -o-linear-gradient(top, rgba(30,30,30,0.8), rgba(60,60,60,0.8)); 517 | background: -ms-linear-gradient(top, rgba(30,30,30,0.8), rgba(60,60,60,0.8)); 518 | background: linear-gradient(rgba(30,30,30,0.8), rgba(60,60,60,0.8)); 519 | } 520 | 521 | .mejs-controls .mejs-horizontal-volume-slider .mejs-horizontal-volume-current { 522 | position: absolute; 523 | left: 0; 524 | top: 11px; 525 | width: 50px; 526 | height: 8px; 527 | margin: 0; 528 | padding: 0; 529 | font-size: 1px; 530 | -webkit-border-radius: 2px; 531 | -moz-border-radius: 2px; 532 | border-radius: 2px; 533 | background: #fff; 534 | background: rgba(255,255,255,0.8); 535 | background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(rgba(255,255,255,0.9)), to(rgba(200,200,200,0.8))); 536 | background: -webkit-linear-gradient(top, rgba(255,255,255,0.9), rgba(200,200,200,0.8)); 537 | background: -moz-linear-gradient(top, rgba(255,255,255,0.9), rgba(200,200,200,0.8)); 538 | background: -o-linear-gradient(top, rgba(255,255,255,0.9), rgba(200,200,200,0.8)); 539 | background: -ms-linear-gradient(top, rgba(255,255,255,0.9), rgba(200,200,200,0.8)); 540 | background: linear-gradient(rgba(255,255,255,0.9), rgba(200,200,200,0.8)); 541 | } 542 | 543 | .mejs-controls .mejs-horizontal-volume-slider .mejs-horizontal-volume-handle { 544 | display: none; 545 | } 546 | 547 | /* End: Mute/Volume */ 548 | 549 | /* Start: Track (Captions and Chapters) */ 550 | .mejs-controls .mejs-captions-button { 551 | position: relative; 552 | } 553 | 554 | .mejs-controls .mejs-captions-button button { 555 | background-position: -48px 0; 556 | } 557 | .mejs-controls .mejs-captions-button .mejs-captions-selector { 558 | visibility: hidden; 559 | position: absolute; 560 | bottom: 26px; 561 | right: -51px; 562 | width: 85px; 563 | height: 100px; 564 | background: url(<%= asset_path "mediaelement_rails/background.png" %>); 565 | background: rgba(50,50,50,0.7); 566 | border: solid 1px transparent; 567 | padding: 10px 10px 0 10px; 568 | overflow: hidden; 569 | -webkit-border-radius: 0; 570 | -moz-border-radius: 0; 571 | border-radius: 0; 572 | } 573 | 574 | /* 575 | .mejs-controls .mejs-captions-button:hover .mejs-captions-selector { 576 | visibility: visible; 577 | } 578 | */ 579 | 580 | .mejs-controls .mejs-captions-button .mejs-captions-selector ul { 581 | margin: 0; 582 | padding: 0; 583 | display: block; 584 | list-style-type: none !important; 585 | overflow: hidden; 586 | } 587 | 588 | .mejs-controls .mejs-captions-button .mejs-captions-selector ul li { 589 | margin: 0 0 6px 0; 590 | padding: 0; 591 | list-style-type: none !important; 592 | display: block; 593 | color: #fff; 594 | overflow: hidden; 595 | } 596 | 597 | .mejs-controls .mejs-captions-button .mejs-captions-selector ul li input { 598 | clear: both; 599 | float: left; 600 | margin: 3px 3px 0 5px; 601 | } 602 | 603 | .mejs-controls .mejs-captions-button .mejs-captions-selector ul li label { 604 | width: 55px; 605 | float: left; 606 | padding: 4px 0 0 0; 607 | line-height: 15px; 608 | font-family: helvetica, arial; 609 | font-size: 10px; 610 | } 611 | 612 | .mejs-controls .mejs-captions-button .mejs-captions-translations { 613 | font-size: 10px; 614 | margin: 0 0 5px 0; 615 | } 616 | 617 | .mejs-chapters { 618 | position: absolute; 619 | top: 0; 620 | left: 0; 621 | -xborder-right: solid 1px #fff; 622 | width: 10000px; 623 | z-index: 1; 624 | } 625 | 626 | .mejs-chapters .mejs-chapter { 627 | position: absolute; 628 | float: left; 629 | background: #222; 630 | background: rgba(0, 0, 0, 0.7); 631 | background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(rgba(50,50,50,0.7)), to(rgba(0,0,0,0.7))); 632 | background: -webkit-linear-gradient(top, rgba(50,50,50,0.7), rgba(0,0,0,0.7)); 633 | background: -moz-linear-gradient(top, rgba(50,50,50,0.7), rgba(0,0,0,0.7)); 634 | background: -o-linear-gradient(top, rgba(50,50,50,0.7), rgba(0,0,0,0.7)); 635 | background: -ms-linear-gradient(top, rgba(50,50,50,0.7), rgba(0,0,0,0.7)); 636 | background: linear-gradient(rgba(50,50,50,0.7), rgba(0,0,0,0.7)); 637 | filter: progid:DXImageTransform.Microsoft.Gradient(GradientType=0, startColorstr=#323232,endColorstr=#000000); 638 | overflow: hidden; 639 | border: 0; 640 | } 641 | 642 | .mejs-chapters .mejs-chapter .mejs-chapter-block { 643 | font-size: 11px; 644 | color: #fff; 645 | padding: 5px; 646 | display: block; 647 | border-right: solid 1px #333; 648 | border-bottom: solid 1px #333; 649 | cursor: pointer; 650 | } 651 | 652 | .mejs-chapters .mejs-chapter .mejs-chapter-block-last { 653 | border-right: none; 654 | } 655 | 656 | .mejs-chapters .mejs-chapter .mejs-chapter-block:hover { 657 | background: #666; 658 | background: rgba(102,102,102, 0.7); 659 | background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(rgba(102,102,102,0.7)), to(rgba(50,50,50,0.6))); 660 | background: -webkit-linear-gradient(top, rgba(102,102,102,0.7), rgba(50,50,50,0.6)); 661 | background: -moz-linear-gradient(top, rgba(102,102,102,0.7), rgba(50,50,50,0.6)); 662 | background: -o-linear-gradient(top, rgba(102,102,102,0.7), rgba(50,50,50,0.6)); 663 | background: -ms-linear-gradient(top, rgba(102,102,102,0.7), rgba(50,50,50,0.6)); 664 | background: linear-gradient(rgba(102,102,102,0.7), rgba(50,50,50,0.6)); 665 | filter: progid:DXImageTransform.Microsoft.Gradient(GradientType=0, startColorstr=#666666,endColorstr=#323232); 666 | } 667 | 668 | .mejs-chapters .mejs-chapter .mejs-chapter-block .ch-title { 669 | font-size: 12px; 670 | font-weight: bold; 671 | display: block; 672 | white-space: nowrap; 673 | text-overflow: ellipsis; 674 | margin: 0 0 3px 0; 675 | line-height: 12px; 676 | } 677 | 678 | .mejs-chapters .mejs-chapter .mejs-chapter-block .ch-timespan { 679 | font-size: 12px; 680 | line-height: 12px; 681 | margin: 3px 0 4px 0; 682 | display: block; 683 | white-space: nowrap; 684 | text-overflow: ellipsis; 685 | } 686 | 687 | .mejs-captions-layer { 688 | position: absolute; 689 | bottom: 0; 690 | left: 0; 691 | text-align:center; 692 | line-height: 20px; 693 | font-size: 16px; 694 | color: #fff; 695 | } 696 | 697 | .mejs-captions-layer a { 698 | color: #fff; 699 | text-decoration: underline; 700 | } 701 | 702 | .mejs-captions-layer[lang=ar] { 703 | font-size: 20px; 704 | font-weight: normal; 705 | } 706 | 707 | .mejs-captions-position { 708 | position: absolute; 709 | width: 100%; 710 | bottom: 15px; 711 | left: 0; 712 | } 713 | 714 | .mejs-captions-position-hover { 715 | bottom: 35px; 716 | } 717 | 718 | .mejs-captions-text { 719 | padding: 3px 5px; 720 | background: url(<%= asset_path "mediaelement_rails/background.png" %>); 721 | background: rgba(20, 20, 20, 0.5); 722 | white-space: pre-wrap; 723 | } 724 | /* End: Track (Captions and Chapters) */ 725 | 726 | /* Start: Error */ 727 | .me-cannotplay { 728 | } 729 | 730 | .me-cannotplay a { 731 | color: #fff; 732 | font-weight: bold; 733 | } 734 | 735 | .me-cannotplay span { 736 | padding: 15px; 737 | display: block; 738 | } 739 | /* End: Error */ 740 | 741 | 742 | /* Start: Loop */ 743 | .mejs-controls .mejs-loop-off button { 744 | background-position: -64px -16px; 745 | } 746 | 747 | .mejs-controls .mejs-loop-on button { 748 | background-position: -64px 0; 749 | } 750 | 751 | /* End: Loop */ 752 | 753 | /* Start: backlight */ 754 | .mejs-controls .mejs-backlight-off button { 755 | background-position: -80px -16px; 756 | } 757 | 758 | .mejs-controls .mejs-backlight-on button { 759 | background-position: -80px 0; 760 | } 761 | /* End: backlight */ 762 | 763 | /* Start: Picture Controls */ 764 | .mejs-controls .mejs-picturecontrols-button { 765 | background-position: -96px 0; 766 | } 767 | /* End: Picture Controls */ 768 | 769 | 770 | /* context menu */ 771 | .mejs-contextmenu { 772 | position: absolute; 773 | width: 150px; 774 | padding: 10px; 775 | border-radius: 4px; 776 | top: 0; 777 | left: 0; 778 | background: #fff; 779 | border: solid 1px #999; 780 | z-index: 1001; /* make sure it shows on fullscreen */ 781 | } 782 | .mejs-contextmenu .mejs-contextmenu-separator { 783 | height: 1px; 784 | font-size: 0; 785 | margin: 5px 6px; 786 | background: #333; 787 | } 788 | 789 | .mejs-contextmenu .mejs-contextmenu-item { 790 | font-family: Helvetica, Arial; 791 | font-size: 12px; 792 | padding: 4px 6px; 793 | cursor: pointer; 794 | color: #333; 795 | } 796 | .mejs-contextmenu .mejs-contextmenu-item:hover { 797 | background: #2C7C91; 798 | color: #fff; 799 | } 800 | 801 | /* Start: Source Chooser */ 802 | .mejs-controls .mejs-sourcechooser-button { 803 | position: relative; 804 | } 805 | 806 | .mejs-controls .mejs-sourcechooser-button button { 807 | background-position: -128px 0; 808 | } 809 | 810 | .mejs-controls .mejs-sourcechooser-button .mejs-sourcechooser-selector { 811 | visibility: hidden; 812 | position: absolute; 813 | bottom: 26px; 814 | right: -10px; 815 | width: 130px; 816 | height: 100px; 817 | background: url(<%= asset_path "mediaelement_rails/background.png" %>); 818 | background: rgba(50,50,50,0.7); 819 | border: solid 1px transparent; 820 | padding: 10px; 821 | overflow: hidden; 822 | -webkit-border-radius: 0; 823 | -moz-border-radius: 0; 824 | border-radius: 0; 825 | } 826 | 827 | .mejs-controls .mejs-sourcechooser-button .mejs-sourcechooser-selector ul { 828 | margin: 0; 829 | padding: 0; 830 | display: block; 831 | list-style-type: none !important; 832 | overflow: hidden; 833 | } 834 | 835 | .mejs-controls .mejs-sourcechooser-button .mejs-sourcechooser-selector ul li { 836 | margin: 0 0 6px 0; 837 | padding: 0; 838 | list-style-type: none !important; 839 | display: block; 840 | color: #fff; 841 | overflow: hidden; 842 | } 843 | 844 | .mejs-controls .mejs-sourcechooser-button .mejs-sourcechooser-selector ul li input { 845 | clear: both; 846 | float: left; 847 | margin: 3px 3px 0 5px; 848 | } 849 | 850 | .mejs-controls .mejs-sourcechooser-button .mejs-sourcechooser-selector ul li label { 851 | width: 100px; 852 | float: left; 853 | padding: 4px 0 0 0; 854 | line-height: 15px; 855 | font-family: helvetica, arial; 856 | font-size: 10px; 857 | } 858 | /* End: Source Chooser */ 859 | 860 | /* Start: Postroll */ 861 | .mejs-postroll-layer { 862 | position: absolute; 863 | bottom: 0; 864 | left: 0; 865 | width: 100%; 866 | height: 100%; 867 | background: url(<%= asset_path "mediaelement_rails/background.png" %>); 868 | background: rgba(50,50,50,0.7); 869 | z-index: 1000; 870 | overflow: hidden; 871 | } 872 | .mejs-postroll-layer-content { 873 | width: 100%; 874 | height: 100%; 875 | } 876 | .mejs-postroll-close { 877 | position: absolute; 878 | right: 0; 879 | top: 0; 880 | background: url(<%= asset_path "mediaelement_rails/background.png" %>); 881 | background: rgba(50,50,50,0.7); 882 | color: #fff; 883 | padding: 4px; 884 | z-index: 100; 885 | cursor: pointer; 886 | } 887 | /* End: Postroll */ 888 | 889 | 890 | /* Start: Speed */ 891 | div.mejs-speed-button { 892 | width: 46px !important; 893 | position: relative; 894 | } 895 | 896 | .mejs-controls .mejs-button.mejs-speed-button button { 897 | background: transparent; 898 | width: 36px; 899 | font-size: 11px; 900 | line-height: normal; 901 | color: #ffffff; 902 | } 903 | 904 | .mejs-controls .mejs-speed-button .mejs-speed-selector { 905 | display: none; 906 | position: absolute; 907 | top: -100px; 908 | left: -10px; 909 | width: 60px; 910 | height: 100px; 911 | background: url(<%= asset_path "mediaelement_rails/background.png" %>); 912 | background: rgba(50, 50, 50, 0.7); 913 | border: solid 1px transparent; 914 | padding: 0; 915 | overflow: hidden; 916 | -webkit-border-radius: 0; 917 | -moz-border-radius: 0; 918 | border-radius: 0; 919 | } 920 | 921 | 922 | .mejs-controls .mejs-speed-button:hover > .mejs-speed-selector { 923 | display: block; 924 | } 925 | 926 | .mejs-controls .mejs-speed-button .mejs-speed-selector ul li label.mejs-speed-selected { 927 | color: rgba(33, 248, 248, 1); 928 | } 929 | 930 | .mejs-controls .mejs-speed-button .mejs-speed-selector ul { 931 | margin: 0; 932 | padding: 0; 933 | display: block; 934 | list-style-type: none !important; 935 | overflow: hidden; 936 | } 937 | 938 | .mejs-controls .mejs-speed-button .mejs-speed-selector ul li { 939 | margin: 0 0 6px 0; 940 | padding: 0 10px; 941 | list-style-type: none !important; 942 | display: block; 943 | color: #fff; 944 | overflow: hidden; 945 | } 946 | 947 | .mejs-controls .mejs-speed-button .mejs-speed-selector ul li input { 948 | clear: both; 949 | float: left; 950 | margin: 3px 3px 0 5px; 951 | display: none; 952 | } 953 | 954 | .mejs-controls .mejs-speed-button .mejs-speed-selector ul li label { 955 | width: 60px; 956 | float: left; 957 | padding: 4px 0 0 0; 958 | line-height: 15px; 959 | font-family: helvetica, arial; 960 | font-size: 11.5px; 961 | color: white; 962 | margin-left: 5px; 963 | cursor: pointer; 964 | } 965 | 966 | .mejs-controls .mejs-speed-button .mejs-speed-selector ul li:hover { 967 | background-color: rgb(200, 200, 200) !important; 968 | background-color: rgba(255,255,255,.4) !important; 969 | } 970 | /* End: Speed */ 971 | 972 | /* Start: Jump Forward */ 973 | 974 | .mejs-controls .mejs-button.mejs-jump-forward-button { 975 | background: transparent url(<%= asset_path "mediaelement_rails/jumpforward.png" %>) no-repeat; 976 | background-position: 3px 3px; 977 | } 978 | .mejs-controls .mejs-button.mejs-jump-forward-button button { 979 | background: transparent; 980 | font-size: 9px; 981 | line-height: normal; 982 | color: #ffffff; 983 | } 984 | 985 | /* End: Jump Forward */ 986 | 987 | /* Start: Skip Back */ 988 | 989 | .mejs-controls .mejs-button.mejs-skip-back-button { 990 | background: transparent url(<%= asset_path "mediaelement_rails/skipback.png" %>) no-repeat; 991 | background-position: 3px 3px; 992 | } 993 | .mejs-controls .mejs-button.mejs-skip-back-button button { 994 | background: transparent; 995 | font-size: 9px; 996 | line-height: normal; 997 | color: #ffffff; 998 | } 999 | 1000 | /* End: Skip Back */ 1001 | 1002 | -------------------------------------------------------------------------------- /app/assets/javascripts/mediaelement_rails/mediaelement.js: -------------------------------------------------------------------------------- 1 | /*! 2 | * 3 | * MediaElement.js 4 | * HTML5