All geek questions in one place

Play videos from a Chrome file system not running on Android

I am trying to create a standalone video player that will download video content from my site for later offline viewing using an HTML5 video element. The code below works fine in Chrome for the desktop, but not on the mobile device (Nexus S smartphone, Nexus 7, 4.1 tablet, since it only launches chrome, which is required for the api file system). I use the file system API, which is supported by chrome both on the desktop and on the mobile device.

I confirmed that it stores the file correctly on the mobile device, and I can get the file correctly, but for some reason, after extracting the video from the locals system, chrome does not want to play the video. This is true whether I use the html5 video element or I directly navigate to the file system URL. When I use the html5 video element, it returns a media_err_not_supported error. I confirmed that the device can play video if I go directly to it on my server (without first saving it using the api file system), so the problem is not a codec or video format problem. I also use the mime type video / mp 4 in both cases.

Again, this works on the desktop, but not on mobile devices. Any ideas?

Here is the code we use:

<!DOCTYPE html > <html> <head> <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js" type="text/javascript"> </script> <script type="text/javascript"> var _fs; var filename = "test3.mp4"; var diskSpaceRequired = 10 * 1024 * 1024; $(document).ready(function () { window.requestFileSystem = window.requestFileSystem || window.webkitRequestFileSystem; function onInitFs(fs) { _fs = fs; getVideo(fs); } if (!!window.requestFileSystem) { window.webkitStorageInfo.requestQuota( window.webkitStorageInfo.PERSISTENT, diskSpaceRequired, // amount of bytes you need function () { }, function () {} ); window.requestFileSystem(window.PERSISTENT, diskSpaceRequired, onInitFs, function () { alert('error'); }); } else { alert('not supported'); } $("#play").on('click', playVideo); $("#ourVideo").on('error', function(e) { console.log('ERROR!!!', e, arguments); console.log($("#ourVideo")[0].error); }); }); function playVideo() { _fs.root.getFile(filename, {}, function (fileEntry) { $("#ourVideo").attr('src', fileEntry.toURL()); fileEntry.file(function (file) { var reader = new FileReader(); reader.onloadend = function (e) { $("#ourVideo").get(0).play(); }; reader.readAsText(file); }, errorHandler); }, errorHandler); } function getVideo(fs) { fs.root.getFile(filename, { create: true }, function (fileEntry) { fileEntry.createWriter(function (fileWriter) { fetchResource(fileWriter); }, errorHandler); }, errorHandler); } function errorHandler(e) { console.log('error', e); } function fetchResource(fileWriter) { console.log('fetchresource'); var xhr = new XMLHttpRequest(); xhr.responseType = "arraybuffer"; xhr.open("GET", "http://mydomain.com/trailer.mp4", true); xhr.onload = function(e) { if (this.status == 200) { var bb = new WebKitBlobBuilder(); bb.append(this.response); var blob = bb.getBlob("video\/mp4"); fileWriter.write(blob); } else { console.log(this.status); } }; xhr.send(); } </script> <title>foo</title> </head> <body> <input type="button" value="Play Video" id="play"/> <video id="ourVideo" controls=""> <source id="vidSource" type="video/mp4"/> </video> </body> </html>
+6
source share
1 answer

The problem looks like your Android chrome does not have access to the Android file system correctly, for this you can use the nanoHttpd server to access the local android files on the device or SD card. for the NanoHttpd server, use this one class in your application and pass the location of the media file as http://localhost:8081/sdcard/(your_media_location).mp4

or get nanoHttpd from https://gist.github.com/1893396

I think this is more accurate for accessing sdcard files than directly accessing them

try changing the html part to

 </head> <body> <input type="button" value="Play Video" id="play"/> <video id="ourVideo" controls=""> <source src="video1.mp4" type= "video/mp4"> <source src="video1.ogv" type= "video/ogg"> </video> </body>

you can convert your mp4 to ogv using http://video.online-convert.com/convert-to-ogg and put the ogv file in the same place in mp4

** For more information, check out these http://www.broken-links.com/2010/07/08/making-html5-video-work-on-android-phones/

HTML5 <video> element on Android not playing

0
source

Source: https://habr.com/ru/post/922783/

More articles:


All Articles