PREVIEW VIDEO BEFORE SAVING IN RAILS

Preview Video Before Saving

html page

<h1>HTML5 local video file player example</h1>
<div id="message"></div>
<input type="file" accept="video/*"/>
<video controls autoplay></video>


<script type="text/javascript">
   (function localFileVideoPlayer() {
    'use strict'
    var URL = window.URL || window.webkitURL
    var displayMessage = function (message, isError) {
      var element = document.querySelector('#message')
    element.innerHTML = message
    element.className = isError ? 'error' : 'info'
    }
    var playSelectedFile = function (event) {
    var file = this.files[0]
    var type = file.type
    var videoNode = document.querySelector('video')
    var canPlay = videoNode.canPlayType(type)
    if (canPlay === '') canPlay = 'no'
    var message = 'Can play type "' + type + '": ' + canPlay
    var isError = canPlay === 'no'
    displayMessage(message, isError)

    if (isError) {
      return
    }

    var fileURL = URL.createObjectURL(file)
    videoNode.src = fileURL
    }
    var inputNode = document.querySelector('input')
    inputNode.addEventListener('change', playSelectedFile, false)
  })()
</script>


<style type="text/css">
  video, input {
    display: block;
  }
  input {
      width: 100%;      
  }
  .info {
      background-color: aqua;           
  }
  .error {
      background-color: red;
      color: white;
  }
</style>

We can follow :-

https://jsfiddle.net/dsbonev/cCCZ2/

Comments

Popular posts from this blog

psql: could not connect to server: No such file or directory Is the server running locally and accepting connections on Unix domain socket "/var/run/postgresql/.s.PGSQL.5432"?

CARRIERWAVE - UPLOAD ANY MEDIA (AUDIO , VIDEO AND IMAGE ) FILE IN RAILS

SELECT COUNTRY WITH STATE AND IT'S CITIES RAILS

RAILS: UPLOADING PHOTOS VIA AMAZON S3 AND PAPERCLIP (UPLOADING FILES TO S3 IN RUBY WITH PAPERCLIP)

SEARCHING USING AJAX IN RAILS

UPLOAD ANY MEDIA FILE IN RAILS USING PAPERCLIP

UNINITIALIZED CONSTANT PAPERCLIP::STORAGE::S3::AWS

CURL COMMAND ON RUBY ON RAILS

CHECK PASSENGER RUBY PATH