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.