เล่นไฟล์วิดีโอในเครื่อง (ฮาร์ดไดรฟ์) ด้วยแท็กวิดีโอ HTML5 หรือไม่

ฉันต้องการบรรลุสิ่งต่อไปนี้

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

จุดประสงค์คือผู้ใช้จะสามารถเลือกไฟล์จากฮาร์ดไดรฟ์ของตนได้

และเหตุผลที่ไม่อัปโหลดก็คือค่าใช้จ่ายในการส่งและโควต้าพื้นที่จัดเก็บ จะไม่มีเหตุผลที่จะบันทึกไฟล์

เป็นไปได้ไหม?

เป็นไปได้ที่จะเล่นไฟล์วิดีโอในเครื่อง

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

เมื่อไฟล์ถูกเลือกผ่านinputองค์ประกอบ:

1. เหตุการณ์ "เปลี่ยนแปลง" เริ่มทำงาน
2. รับวัตถุไฟล์แรกจากinput.files FileList
3. สร้างURL ของวัตถุที่ชี้ไปที่วัตถุไฟล์
4. ตั้งค่า URL ของวัตถุเป็นvideo.srcคุณสมบัติ

5. เอนหลังดู :)

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>

ซึ่งจะเป็นไปได้ก็ต่อเมื่อไฟล์ HTML ถูกโหลดด้วยfileโปรโตคอลจากฮาร์ดดิสก์ของผู้ใช้ภายในเครื่อง

หากหน้า HTML ให้บริการโดย HTTP จากเซิร์ฟเวอร์คุณจะไม่สามารถเข้าถึงไฟล์ในเครื่องใด ๆ โดยระบุในsrcแอตทริบิวต์ด้วยfile://โปรโตคอลเนื่องจากจะหมายความว่าคุณสามารถเข้าถึงไฟล์ใด ๆ บนคอมพิวเตอร์ของผู้ใช้โดยที่ผู้ใช้ไม่ทราบว่าจะเป็น ความเสี่ยงด้านความปลอดภัยอย่างมาก

ดังที่ Dimitar Bonev กล่าวไว้คุณสามารถเข้าถึงไฟล์ได้หากผู้ใช้เลือกโดยใช้ตัวเลือกไฟล์ด้วยตัวเอง หากไม่มีขั้นตอนนั้นเบราว์เซอร์ทั้งหมดจะถูกห้ามด้วยเหตุผลที่ดี ดังนั้นในขณะที่คำตอบของเขาอาจพิสูจน์ได้ว่ามีประโยชน์สำหรับคนจำนวนมาก แต่ก็คลายความต้องการจากรหัสในคำถามเดิม

พบปัญหานี้เมื่อไม่นานมานี้ เว็บไซต์ไม่สามารถเข้าถึงไฟล์วิดีโอบนพีซีในระบบได้เนื่องจากการตั้งค่าความปลอดภัย (เข้าใจได้จริงๆ) วิธีเดียวที่ฉันสามารถแก้ไขได้คือเรียกใช้เว็บเซิร์ฟเวอร์บนพีซีภายใน (server2Go) และการอ้างอิงทั้งหมดไปยังไฟล์วิดีโอจากเว็บคือ localhost / video.mp4

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

ไม่ใช่ทางออกที่ดี แต่ใช้ได้ผลสำหรับฉัน