5
मैं अपने HTML5 वीडियो प्लेयर में ऑफ़लाइन कार्यक्षमता जोड़ने की कोशिश कर रहा हूं। मैं फ़ाइलों को क्रोम फ़ाइल सिस्टम में ब्लॉब के रूप में लिखने का प्रयास कर रहा हूं और फिर उन्हें वहां से पढ़ता हूं। मेरा मानना है कि मैं एक ऐसे मुद्दे पर चल रहा हूं जहां फाइलें वास्तव में लिखी जा रही हैं, बस फ़ाइल का नाम। चूंकि मेरा नीचे कोड वर्तमान में गठित है, यह काम करता है, हालांकि अभी भी अगर यह स्थायी रूप से इंटरनेट से जुड़ा हुआ है। मेरा लक्ष्य फाइल सिस्टम में फ़ाइलों को एक सतत निर्देशिका में डाउनलोड करना है और फिर इंटरनेट डिस्कनेक्ट होने पर खेलना जारी रखना है।ऑफ़लाइन खेलने के लिए वीडियो सिस्टम के रूप में फ़ाइल सिस्टम का उपयोग
$(document).ready(function() {
var dir = "http://www.kevmoe.com/networks/gsplayer/";
var fileextension = ".mp4";
var srcfiles = $.ajax({
//This will retrieve the contents of the folder if the folder is configured as 'browsable'
url: dir,
success: function(data) {
//List all .mp4 file names in the page
$(data).find("a:contains(" + fileextension + ")").each(function() {
var filename = $(this).attr("href").replace(window.location.host, "").replace("http://", "");
$("#container").append("<div id='div1' class='video'><video id='video1' class='vidarray' preload='none' poster='bkg.png'><source src='" + filename + "' type='video/mp4'></video></div>");
async: false;
window.requestFileSystem = window.requestFileSystem || window.webkitRequestFileSystem;
window.requestFileSystem(window.PERSISTANT, 200000 * 1024 * 1024, initFS, errorHandler);
function initFS(fs) {
console.log('filesystem engaged'); // Just to check if everything is OK :)
// place the functions you will learn bellow here
function errorHandler(err) {
var msg = 'An error occured: ';
};
function createDir(rootDir, folders) {
rootDir.getDirectory(folders[0], {
create: true
}, function(dirEntry) {
if (folders.length) {
createDir(dirEntry, folders.slice(1));
}
}, errorHandler);
};
createDir(fs.root, 'files/video/'.split('/'));
fs.root.getDirectory('video', {}, function(dirEntry) {
var dirReader = dirEntry.createReader();
dirReader.readEntries(function(entries) {
for (var i = 0; i < entries.length; i++) {
var entry = entries[i];
if (entry.isDirectory) {
console.log('Directory: ' + entry.fullPath);
} else if (entry.isFile) {
console.log('File: ' + entry.fullPath);
}
}
}, errorHandler);
}, errorHandler);
fs.root.getFile(filename, {
create: true,
exclusive: true
}, function(fileEntry) {
fileEntry.createWriter(function(fileWriter) {
var blob = new Blob([data], {
type: 'video/mp4'
});
fileWriter.write(blob);
}, errorHandler);
console.log('file downloaded');
}, errorHandler);
//Try to add an event listener for when all files are finished loading into file system. Then use another function to source the videos locally.
var dirReader = fs.root.createReader();
var entries = [];
// Call the reader.readEntries() until no more results are returned.
dirReader.readEntries(function(results) {
//List all .mp4 file names in the page
$(results).find("a:contains(" + fileextension + ")").each(function() {
var filename = $(this).attr("href").replace(window.location.host, "").replace("http://", "");
$("#container").append("<div id='div1' class='video'><video id='video1' class='vidarray' preload='none' poster='bkg.png'><source src='" + filename + "' type='video/mp4'></video></div>");
async: false;
}, errorHandler);
});
};
function errorHandler() {
console.log('An error occured');
};
});
var videos = $('.video');
//handle ending of video
videos.find('video').on('ended', function() {
playNextVideo(videos);
});
// start with the first one
playNextVideo(videos);
function playNextVideo(videoList) {
var activeVideo = videoList.filter('.active').removeClass('active'), // identify active video and remove active class
activeIndex = videoList.index(activeVideo), // get the active video index in the group
nextVideo = videoList.eq(activeIndex + 1), // get the next video in line
actualVideo;
// if there is no next video start from first
if (nextVideo.length == 0) nextVideo = videoList.first();
// pause all videos
videoList.find('video').each(function() {
this.pause();
})
// get reference to next video element
actualVideo = nextVideo.find('video').get(0);
// add active class to next video
nextVideo.addClass('active');
// load and play
actualVideo.volume = 0.04;
actualVideo.load();
actualVideo.play();
}
}
});
});
चाहेंगे वीडियो स्थानीय रूप से आपकी समस्या का समाधान हो सकता है या क्या आप जोर देते हैं कि यह ऑफ़लाइन उपयोग के लिए किसी विशेष निर्देशिका में डाउनलोड हो जाता है? यदि आपको वीडियो को ऑफ़लाइन चलाने में सक्षम होने की आवश्यकता है [यह स्टैक ओवरफ्लो प्रश्न] (https://stackoverflow.com/questions/34668291/html-video-in-browser-cache) आपकी मदद कर सकता है। –
यह सिर्फ एक टाइपो हो सकता है लेकिन 'window.PERSISTANT' को 'विंडो' के दौरान अपरिभाषित किया गया है। PERSISTENT' है। यदि यह नहीं है (एक टाइपो) तो आप संभवतया व्यक्तिगत भंडारण के बजाय टेम्पलेटरी पर लिख रहे हैं। – IronGeek
क्रिस्टोफर। मैंने कैश करने की कोशिश की लेकिन यह बड़ी फ़ाइलों के लिए काम नहीं किया। – KevMoe