HTML5 वीडियो टैग के साथ स्थानीय (हार्ड-ड्राइव) वीडियो फ़ाइल चलाएं?

Question 1

मैं निम्नलिखित हासिल करना चाहता हूं।

<video src="file:///Users/username/folder/video.webm">
</video>

आशय यह है कि उपयोगकर्ता अपनी हार्ड ड्राइव से किसी फ़ाइल का चयन कर सकेगा।

और अपलोड न करने का कारण निश्चित रूप से ट्रांसमिशन लागत और भंडारण कोटा है। फ़ाइल को सहेजने का कोई कारण नहीं होगा।

क्या यह संभव है?

Question 2

स्थानीय वीडियो फ़ाइल चलाना संभव है।

<input type="file" accept="video/*"/>
<video controls autoplay></video>

जब कोई फ़ाइल inputतत्व के माध्यम से चुनी जाती है:

'परिवर्तन' घटना को निकाल दिया गया है
FileList से पहली फ़ाइल ऑब्जेक्ट प्राप्त करेंinput.files
ऑब्जेक्ट URL बनाएं जो फ़ाइल ऑब्जेक्ट को इंगित करता है
ऑब्जेक्ट URL को video.srcप्रॉपर्टी पर सेट करें
पीछे झुकें और देखें :)

http://jsfiddle.net/dsbonev/cCCZ2/embedded/result,js,html,css/

कोड स्निपेट दिखाएं

(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)
})()

video,
input {
  display: block;
}

input {
  width: 100%;
}

.info {
  background-color: aqua;
}

.error {
  background-color: red;
  color: white;
}

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

स्निपेट का विस्तार करें

Question 3

यह तभी संभव होगा जब HTML फ़ाइल को fileस्थानीय उपयोगकर्ता की हार्डडिस्क से प्रोटोकॉल के साथ लोड किया गया हो ।

यदि एचटीएमएल पेज एक सर्वर से एचटीटीपी द्वारा परोसा जाता है, तो आप प्रोटोकॉल के srcसाथ एक विशेषता में निर्दिष्ट करके किसी भी स्थानीय फाइल तक नहीं पहुंच सकते हैं file://क्योंकि इसका मतलब होगा कि आप उपयोगकर्ता के बिना किसी भी फाइल को उपयोगकर्ता के बिना एक्सेस कर सकते हैं, जो कि एक होगा भारी सुरक्षा जोखिम।

जैसा कि दिमितार बोनव ने कहा, आप एक फ़ाइल का उपयोग कर सकते हैं यदि उपयोगकर्ता अपने दम पर एक फ़ाइल चयनकर्ता का उपयोग करके इसका चयन करता है। उस कदम के बिना, यह सभी ब्राउज़रों द्वारा अच्छे कारणों के लिए निषिद्ध है। इस प्रकार, जबकि उनका जवाब कई लोगों के लिए उपयोगी साबित हो सकता है, यह मूल प्रश्न में कोड से आवश्यकता को कम करता है।

Question 4

थोड़ी देर पहले इस समस्या के लिए भाग गया। वेबसाइट सुरक्षा सेटिंग्स के कारण स्थानीय पीसी पर वीडियो फ़ाइल तक नहीं पहुंच सकती है (वास्तव में) केवल जिस तरह से मैं इसे प्राप्त कर सकता था वह स्थानीय पीसी (सर्वर 2 गो) पर एक वेबसर्वर को चलाने के लिए था और वेब से वीडियो फ़ाइल के सभी संदर्भ थे स्थानीय होस्ट / video.mp4

<div id="videoDiv">
     <video id="video" src="http://127.0.0.1:4001/videos/<?php $videoFileName?>" width="70%" controls>
    </div>
<!--End videoDiv-->

एक आदर्श समाधान नहीं है लेकिन मेरे लिए काम किया।