Chcę osiągnąć co następuje.
<video src="file:///Users/username/folder/video.webm">
</video>
Chodzi o to, aby użytkownik mógł wybrać plik ze swojego dysku twardego.
Powodem nieprzesyłania są oczywiście koszty transmisji i limit miejsca. Nie będzie powodu, aby zapisywać plik.
Czy to możliwe?
html
video
html5-video
offline
Chris
źródło
źródło
Odpowiedzi:
Możliwe jest odtworzenie lokalnego pliku wideo.
<input type="file" accept="video/*"/> <video controls autoplay></video>
Gdy plik jest wybrany poprzez
input
element:input.files
FileListvideo.src
właściwośćOdchyl się i oglądaj :)
http://jsfiddle.net/dsbonev/cCCZ2/embedded/result,js,html,css/
Pokaż fragment kodu
(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>
źródło
Będzie to możliwe tylko wtedy, gdy plik HTML zostanie również załadowany
file
protokołem z dysku twardego użytkownika lokalnego.Jeśli strona HTML jest obsługiwana przez HTTP z serwera, nie możesz uzyskać dostępu do żadnych plików lokalnych, określając je w
src
atrybucie zfile://
protokołem, ponieważ oznaczałoby to, że możesz uzyskać dostęp do dowolnego pliku na komputerze użytkownika bez wiedzy użytkownika, który będzie ogromne zagrożenie bezpieczeństwa.Jak powiedział Dimitar Bonev, możesz uzyskać dostęp do pliku, jeśli użytkownik wybierze go samodzielnie za pomocą selektora plików. Bez tego kroku jest to zabronione przez wszystkie przeglądarki z ważnych powodów. Tak więc, chociaż jego odpowiedź może okazać się przydatna dla wielu osób, rozluźnia to wymaganie z kodu w pierwotnym pytaniu.
źródło
Niedawno wpadłem na ten problem. Witryna nie mogła uzyskać dostępu do pliku wideo na lokalnym komputerze ze względu na ustawienia bezpieczeństwa (naprawdę zrozumiałe). TYLKO sposób, w jaki mogłem to obejść, to uruchomienie serwera internetowego na lokalnym komputerze (server2Go), a wszystkie odniesienia do pliku wideo z sieci WWW dotyczyły 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-->
Nie jest to idealne rozwiązanie, ale zadziałało dla mnie.
źródło