Putar file video lokal (hard-drive) dengan tag video HTML5?

Saya ingin mencapai yang berikut.

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

Tujuannya adalah agar pengguna dapat memilih file dari hard drive-nya.

Dan alasan tidak mengupload tentu saja biaya transmisi dan kuota penyimpanan. Tidak ada alasan untuk menyimpan file.

Apa itu mungkin?

— Chris
sumber

Ini pasti tidak akan berfungsi dengan input file. Ini mungkin bekerja dengan HTML5 ondrop, tetapi saya rasa Anda tidak dapat memanfaatkannya untuk mengunggah file. Taruhan terbaik Anda mungkin adalah melakukan ekstensi Chrome.

— Brian Nickel

Jawaban:

245

Dimungkinkan untuk memutar file video lokal.

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

Ketika file dipilih melalui inputelemen:

acara 'perubahan' dipecat
Dapatkan objek File pertama dari input.files FileList
Buat URL objek yang mengarah ke objek File
Setel URL objek ke video.srcproperti
Bersandar dan perhatikan :)

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

Tampilkan cuplikan kode

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

Expand snippet

— Dimitar Bonev
sumber

Ini berfungsi untuk saya di chrome di mac. Tidak bekerja dengan safari 6.1

— Patrick Cullen

Sepertinya ada masalah yang diketahui dengan safari: stackoverflow.com/questions/19088400/… dan bugs.webkit.org/show_bug.cgi?id=101671

— Patrick Cullen

Solusi luar biasa, ini juga berfungsi di Chrome untuk Windows.

— JT Taylor

Adakah yang sudah melakukan pekerjaan untuk halaman masuk dan keluar potongan video yang sesuai agar tidak membunuh memori browser untuk video besar?

— Eric Bloch

Tidak dapat melihat file .mov atau .avi. Ajukan pertanyaan di sini: stackoverflow.com/questions/32599806/…

— mpsbhat

Itu hanya mungkin jika file HTML juga dimuat dengan fileprotokol dari harddisk pengguna lokal.

Jika halaman HTML disajikan oleh HTTP dari server, Anda tidak dapat mengakses file lokal apa pun dengan menentukannya dalam srcatribut dengan file://protokol karena itu berarti Anda dapat mengakses file apa pun di komputer pengguna tanpa pengguna mengetahui mana yang akan menjadi risiko keamanan yang sangat besar.

Seperti yang dikatakan Dimitar Bonev, Anda dapat mengakses file jika pengguna memilihnya menggunakan pemilih file mereka sendiri. Tanpa langkah itu, itu dilarang oleh semua browser karena alasan yang bagus. Jadi, meskipun jawabannya mungkin terbukti bermanfaat bagi banyak orang, ini melonggarkan persyaratan dari kode dalam pertanyaan awal.

— Holger Just
sumber

Solusi Dimitrov Bonev menunjukkan solusi ini tidak benar - Anda dapat mengakses file lokal melalui input type = file.

— JT Taylor

Nah, solusinya hanya berfungsi jika Anda membiarkan pengguna memilih file terlebih dahulu. Anda masih tidak dapat memberi nama jalur ke file dalam sumber HTML (seperti yang dinyatakan dalam pertanyaan) dan mengaksesnya dengan cara itu. Jadi, solusinya secara teknis untuk pertanyaan lain.

— Holger Hanya

vlc player juga dapat memutar file apa saja di komputer, tetapi juga ada risiko keamanan. Itu dapat mengunduh file dari hard disk kita ke server mereka tanpa kita sadari jika mereka mau, bukan? Jadi mengapa tidak ada risiko keamanan? Dalam kasus terburuk, pengguna dapat diizinkan untuk menerima secara manual jika dia mengizinkan browser untuk memutar file. Karena ada situasi di mana pengguna mempercayai 100% halaman, karena pengguna adalah orang-orang yang bekerja di perusahaan yang sama dengan pembuat web.

— Dariux

Mengalami masalah ini beberapa waktu lalu. Situs web tidak dapat mengakses file video di PC lokal karena pengaturan keamanan (benar-benar dapat dimengerti) HANYA cara saya bisa menyiasatinya adalah dengan menjalankan server web di PC lokal (server2Go) dan semua referensi ke file video dari web adalah ke 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-->

Bukan solusi yang ideal tetapi berhasil untuk saya.

— jcoshea.dll
sumber

Jika Anda menyalin file ke lokasi cache dan menyetel jalur sumber video ke sana, file tersebut akan diputar. Salin file ke context.getExternalCacheDir (). GetAbsolutePath (). Bekerja untuk saya.

— Derek Wade

juga dapat dilakukan dengan server web apa pun di komputer pengguna seperti apache atau mongoose

— Dariux