allow user to select multiple videos simultaneously using only JS

I want to have several video players on one page, and allow the user to select a video for each video player. Each player does select the video chosen, but only the first player plays its chosen video.

I did try to copy the code several times and assign each player a new id. But I am very, very new at using js and none of this code is mine. I put this together by searching the internet copying and modifying existing code. I have research all of these functions and variables, but I am as far as I can go.

       (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 isError = canPlay === 'no'
     if (isError)
   {return
   }
     var fileURL = URL.createObjectURL(file)
     videoNode.src = fileURL
   }
     var inputNode = document.querySelector('input')
     inputNode.addEventListener('change', playSelectedFile, false)
  })()

The goal is for personal use, on client side only, using Chrome, and only using js. To have several video players on one page, and allow the user to choose a video for each video player. Thank you for your help.

Answers:

Tags

Recent Questions

Top Questions

Home Tags Terms of Service Privacy Policy DMCA Contact Us

©2020 All rights reserved.