为什么我的Android设备播放HTML5视频通过XHR加载斑点？ [英] Why can't my Android device play HTML5 video loaded as Blob via XHR?
本文介绍了为什么我的Android设备播放HTML5视频通过XHR加载斑点？的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
我已经创建了之前下载一个完整的HTML5视频源的示例项目播放。要做到这一点，我不得不使用的responseType通过并将其转换为一个 XMLHtt prequest 加载视频源文件：arraybuffer的Blob 。
本办法适用于桌面浏览器很好，但是当试图玩这个Android移动设备上的视频无法播放，如果我在全屏更高版本的Android，我会得到下面的错误对话框的视频。
我的样本项目，请 rel=\"nofollow\">。
这里的code：
函数getSupportedVideoFormats（）{ //从Modernizr的测试。
VAR ELEM =使用document.createElement（'视频'）;
VAR布尔= FALSE; // IE9在Windows服务器上运行SKU可以导致异常被抛出，错误＃224
尝试{
如果（布尔= !! elem.canPlayType）{
布尔=新布尔（布尔）;
bool.ogg = elem.canPlayType（'视频/ OGG codeCS =Theora的'）代替（/ ^没有$ /，''）。 //没有的QuickTime，这个值是`undefined`。 github.com/Modernizr/Modernizr/issues/546
bool.h264 = elem.canPlayType（'视频/ MP4; codeCS =avc1.42E01E'）代替（/ ^没有$ /，''）。 bool.webm = elem.canPlayType（'视频/ WEBM codeCS =VP8，Vorbis的'）代替（/ ^没有$ /，''）。 bool.vp9 = elem.canPlayType（'视频/ WEBM codeCS =VP9'）代替（/ ^没有$ /，''）。 bool.hls = elem.canPlayType（'应用程序/ x-mpegURL codeCS =avc1.42E01E'）。取代（/ ^没有$ /，''）;
}
}赶上（E）{} 返回布尔;}功能getVideoFormat（MIME）{ 返回MIME？ 视频/ WEBM'：'WEBM'; 变种布尔= getSupportedVideoFormats（）;
//视频格式后备的优先次序。
如果（bool.h264！==''）{
返回MIME？ 视频/ MP4'：'MP4';
}
如果（bool.webm！==''）{
返回MIME？ 视频/ WEBM'：'WEBM';
}
如果（bool.ogg！==''）{
返回MIME？ 视频/ OGG'：'OGV';
}
}功能updateProgressBar（值）{
值= Math.round（值）;
progress.setAttribute（'valuenow'，值）;
progress.style.width =值+'％';
progress.innerHTML =值+'％';
}功能loadVideoFully（事件）{ GET（URL）; 功能onProgress（事件）{
如果（event.lengthComputable）{
VAR完成=（event.loaded / event.total）* 100;
updateProgressBar（完成）;
}
} 功能的onLoad（事件）{
VAR类型= getVideoFormat（真）;
VAR BLOB =新的Blob（[event.target.response] {
型：
}）;
video.type =类型;
video.src = URL.createObjectURL（BLOB）;
video.play（）;
} 功能GET（URL）{
VAR XHR =新XMLHtt prequest（）;
xhr.open（GET，网址，真实）;
xhr.setRequestHeader（'访问控制允许来源'，'*'）;
xhr.responseType ='arraybuffer';
xhr.onprogress = onProgress;
xhr.onload =的onLoad;
xhr.send（）;
}}功能loadVideoNatively（事件）{ 功能LOGEVENT（五）{
变种调试= [];
开关（e.type）{
案进步：
无功完成=（this.buffered.end（0）/ this.duration）* 100;
updateProgressBar（完成）;
debug.push（完成）;
默认：
debug.push（e.type，E）;
打破;
}
console.debug（调试）;
} video.addEventListener（'loadstart'，LOGEVENT）;
video.addEventListener（'durationchange'，LOGEVENT）;
video.addEventListener（'等待loadedmetadata'，LOGEVENT）;
video.addEventListener（'loadeddata'，LOGEVENT）;
video.addEventListener（进步，LOGEVENT）;
video.addEventListener（'canplay'，LOGEVENT）;
video.addEventListener（'canplaythrough'，LOGEVENT）; video.src =网址;
video.type = getVideoFormat（真）;
video.load（）;
}//从videojs视频样本，没有扩展名。
VAR URL ='视频/海洋夹。 + getVideoFormat（）;
VAR视频=的document.getElementById（'视频'）;
VAR进度=的document.getElementById（'进步'）;
VAR键=的document.getElementById（'按钮'）;
VAR复选框=的document.getElementById（'复选框'）;功能loadVideo（事件）{
checkbox.checked？ loadVideoNatively（事件）：loadVideoFully（事件）;
}button.addEventListener（'点击'，loadVideo）;console.debug（'支持的视频格式：'，getSupportedVideoFormats（））;
解决方案
这看起来是一个错误：
请参阅Can't发挥使用Android版Chrome ，并在铬的 HTTPS：//$c$c.google.com/p/chromium/issues/detail ID = 253465
I've created a sample project that downloads an entire HTML5 video source before playing it. To accomplish this I had to load the video source file via a XMLHttpRequest using a responseType: 'arraybuffer' and converting it to a Blob.
This approach works fine on desktop browsers but when trying to play this on Android mobile devices the video won't play, and if I fullscreen the video on later versions of Android I'll get the following error dialog.
My sample project is available here.
Here's the code:
function getSupportedVideoFormats() {
// Test from Modernizr.
var elem = document.createElement('video');
var bool = false;
// IE9 Running on Windows Server SKU can cause an exception to be thrown, bug #224
try {
if (bool = !!elem.canPlayType) {
bool = new Boolean(bool);
bool.ogg = elem.canPlayType('video/ogg; codecs="theora"').replace(/^no$/, '');
// Without QuickTime, this value will be `undefined`. github.com/Modernizr/Modernizr/issues/546
bool.h264 = elem.canPlayType('video/mp4; codecs="avc1.42E01E"').replace(/^no$/, '');
bool.webm = elem.canPlayType('video/webm; codecs="vp8, vorbis"').replace(/^no$/, '');
bool.vp9 = elem.canPlayType('video/webm; codecs="vp9"').replace(/^no$/, '');
bool.hls = elem.canPlayType('application/x-mpegURL; codecs="avc1.42E01E"').replace(/^no$/, '');
}
} catch (e) {}
return bool;
}
function getVideoFormat(mime) {
return mime ? 'video/webm' : 'webm';
var bool = getSupportedVideoFormats();
// Prioritization of video format fallback.
if (bool.h264 !== '') {
return mime ? 'video/mp4' : 'mp4';
}
if (bool.webm !== '') {
return mime ? 'video/webm' : 'webm';
}
if (bool.ogg !== '') {
return mime ? 'video/ogg' : 'ogv';
}
}
function updateProgressBar(value) {
value = Math.round(value);
progress.setAttribute('valuenow', value);
progress.style.width = value + '%';
progress.innerHTML = value + '%';
}
function loadVideoFully(event) {
GET(url);
function onProgress(event) {
if (event.lengthComputable) {
var completion = (event.loaded / event.total) * 100;
updateProgressBar(completion);
}
}
function onLoad(event) {
var type = getVideoFormat(true);
var blob = new Blob([event.target.response], {
type: type
});
video.type = type;
video.src = URL.createObjectURL(blob);
video.play();
}
function GET(url) {
var xhr = new XMLHttpRequest();
xhr.open('GET', url, true);
xhr.setRequestHeader('Access-Control-Allow-Origin', '*');
xhr.responseType = 'arraybuffer';
xhr.onprogress = onProgress;
xhr.onload = onLoad;
xhr.send();
}
}
function loadVideoNatively(event) {
function logEvent(e) {
var debug = [];
switch (e.type) {
case "progress":
var completion = (this.buffered.end(0) / this.duration) * 100;
updateProgressBar(completion);
debug.push(completion);
default:
debug.push(e.type, e);
break;
}
console.debug(debug);
}
video.addEventListener('loadstart', logEvent);
video.addEventListener('durationchange', logEvent);
video.addEventListener('loadedmetadata', logEvent);
video.addEventListener('loadeddata', logEvent);
video.addEventListener('progress', logEvent);
video.addEventListener('canplay', logEvent);
video.addEventListener('canplaythrough', logEvent);
video.src = url;
video.type = getVideoFormat(true);
video.load();
}
// Video sample from videojs, without extension.
var url = 'videos/oceans-clip.' + getVideoFormat();
var video = document.getElementById('video');
var progress = document.getElementById('progress');
var button = document.getElementById('button');
var checkbox = document.getElementById('checkbox');
function loadVideo(event) {
checkbox.checked ? loadVideoNatively(event) : loadVideoFully(event);
}
button.addEventListener('click', loadVideo);
console.debug('Video Formats Supported:', getSupportedVideoFormats());
解决方案
This looks to be a bug:
See Can't play a blob-url video using Chrome for Android and a possibly related bug report in Chromium https://code.google.com/p/chromium/issues/detail?id=253465
这篇关于为什么我的Android设备播放HTML5视频通过XHR加载斑点？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
