এইচটিএমএল 5 ভিডিও ট্যাগ সহ স্থানীয় (হার্ড-ড্রাইভ) ভিডিও ফাইল খেলুন?

Question 1

আমি নিম্নলিখিত অর্জন করতে চান।

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

উদ্দেশ্যটি হ'ল ব্যবহারকারী তার হার্ড ড্রাইভ থেকে একটি ফাইল নির্বাচন করতে সক্ষম হবেন।

এবং আপলোড না করার কারণটি অবশ্যই সংক্রমণ ব্যয় এবং স্টোরেজ কোটা। ফাইলটি সংরক্ষণ করার কোনও কারণ থাকবে না।

এটা কি সম্ভব?

Question 2

স্থানীয় ভিডিও ফাইল চালানো সম্ভব।

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

যখন inputউপাদানটির মাধ্যমে কোনও ফাইল নির্বাচন করা হয় :

'পরিবর্তন' ইভেন্টটি বরখাস্ত করা হয়েছে
ফাইললিস্ট থেকে প্রথম ফাইল অবজেক্টটি পানinput.files
একটি বস্তুর ইউআরএল তৈরি করুন যা ফাইল অবজেক্টকে নির্দেশ করে
video.srcসম্পত্তিটিতে অবজেক্টের ইউআরএল সেট করুন
পিছনে ঝুঁকুন এবং দেখুন :)

http://jsfiddle.net/dsbonev/cCCZ2/ebded/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

এটি তখনই সম্ভব হবে fileযখন স্থানীয় ব্যবহারকারীর হার্ডডিস্ক থেকে প্রোটোকল দিয়ে এইচটিএমএল ফাইল লোড করা থাকে ।

যদি এইচটিএমএল পৃষ্ঠাটি কোনও সার্ভার থেকে এইচটিটিপি দ্বারা পরিবেশন করা হয় তবে আপনি কোনও স্থানীয় ফাইলের srcসাথে কোনও বৈশিষ্ট্যে নির্দিষ্ট করে অ্যাক্সেস করতে পারবেন নাfile:// প্রোটোকলের আপনি ব্যবহারকারী কম্পিউটারে যে কোনও ফাইল অ্যাক্সেস করতে পারবেন তা না জেনেই ব্যবহারকারী কোনটি হবে বিশাল নিরাপত্তা ঝুঁকি।

দিমিতর বোনেভ যেমন বলেছিলেন, ব্যবহারকারী যদি ফাইল ফাইল নির্বাচন করে তাদের নিজের দ্বারা এটি নির্বাচন করে তবে আপনি কোনও ফাইল অ্যাক্সেস করতে পারবেন । এই পদক্ষেপ ব্যতীত, এটি ভাল ব্রাউজারগুলির পক্ষে ভাল কারণে নিষিদ্ধ। সুতরাং, যদিও তার উত্তরটি অনেকের পক্ষে কার্যকর প্রমাণিত হতে পারে তবে এটি মূল প্রশ্নের কোড থেকে প্রয়োজনীয়তাটি আলগা করে।

Question 4

কিছুক্ষণ আগে এই সমস্যায় পড়েছি। সুরক্ষা সেটিংসের কারণে ওয়েবসাইটটি স্থানীয় পিসিতে ভিডিও ফাইল অ্যাক্সেস করতে পারেনি (সত্যিই বোধগম্য) আমি কেবল এটির কাছাকাছি যেতে পারি স্থানীয় পিসিতে ওয়েব সার্ভার চালানো (সার্ভার 2 জিও) এবং ওয়েব থেকে ভিডিও ফাইলের সমস্ত উল্লেখ ছিল লোকালহোস্ট / ভিডিও. এমপি 4

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

আদর্শ সমাধান নয় তবে আমার পক্ষে কাজ করেছে।