Giter VIP home page Giter VIP logo

refinerycms-videojs's Introduction

Refinery CMS Video.js

Simple video extension for Refinery CMS. It adds a 'Videos' tab to admin menu where you can manage videos. And adds an 'add video' link to WYMeditor on 'Pages'.

There are three ways to include videos in your project.

  • You can embedded video (like youtube or vimeo iframes)
  • You can upload files
  • You can use link to external source

Video (instance of Refinery::Videos::Video model) aggregates different sources (files and links, one or many).

The instance method Video#to_html renders an html video tag like:

<video id="my_video_1" class="video-js vjs-default-skin" controls
  preload="auto" width="640" height="264"
  poster="my_video_poster.png"
  data-setup="{}">
  <source src="oceans-clip.mp4" type='video/mp4'>
  <source src="http://video-js.zencoder.com/oceans-clip.webm" type='video/webm'>
</video>

This content can be added to a page in WYMeditor, or everywhere in your view like:

<div class='video'>
  <%= @my_video.to_html %>
</div>

This extension:

  • Uses the Video.js player to playback video (except embedded video, of course).
  • Allows you to manage playback configuration (poster image, width, height, autoplay, controls, etc).
  • Allows you to insert video to pages using WYMeditor, by inserting an HTML code with video (or iframe) tag.
  • Automatically downloads the video.js library on your website frontend.

Demo

You can see the extension in action here Use [email protected] / [email protected] to login. Please, remove your videos after playing around.

Requirements

Refinery CMS version 2.0.1 or above

Install

Open up your Gemfile and add at the bottom this line:

gem 'refinerycms-videojs'

Now, run:

bundle install

Next, to install the video extension run:

rails generate refinery:videos

Run database migrations:

rake db:migrate

And you're done.

Developing and Contribution

More Information

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    ๐Ÿ–– Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. ๐Ÿ“Š๐Ÿ“ˆ๐ŸŽ‰

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google โค๏ธ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.