Following code works in Chrome (22.0) but not in Safari (6.0)
<!DOCTYPE html>
<html>
<head>
<script>
function onGo(e) {
var fr = new FileReader();
var file = document.getElementById("file").files[0];
fr.onload = function(e) {
var data = new Uint8Array(e.target.result);
var blob = new Blob([data], {type: 'audio/mpeg'});
var audio = document.createElement('audio');
audio.addEventListener('loadeddata', function(e) {
audio.play();
}, false);
audio.addEventListener('error', function(e) {
console.log('error!', e);
}, false);
audio.src = webkitURL.createObjectURL(blob);
};
fr.readAsArrayBuffer(file);
}
</script>
</head>
<body>
<input type="file" id="file" name="file" />
<input type="submit" id="go" onclick="onGo()" value="Go" />
</body>
</html>
In Safari, neither callback (loadeddata nor error) is called.
The content used is an mp3 file, which is normally played back with audio tag.
Is there any special care needed for Safari?
Many years later, I believe the example in the OP should work just fine. As long as you somehow set the mime type when creating the blob, like the OP does above with the type property of the options passed in:
new Blob([data], {type: 'audio/mpeg'});
You could also use a <source> element inside of an audio element and set the type attribute of the <source> element. I have an example of this here:
https://lastmjs.github.io/safari-object-url-test
And here is the code:
const response = await window.fetch('https://upload.wikimedia.org/wikipedia/commons/transcoded/a/ab/Alexander_Graham_Bell%27s_Voice.ogg/Alexander_Graham_Bell%27s_Voice.ogg.mp3');
const audioArrayBuffer = await response.arrayBuffer();
const audioBlob = new Blob([audioArrayBuffer]);
const audioObjectURL = window.URL.createObjectURL(audioBlob);
const audioElement = document.createElement('audio');
audioElement.setAttribute('controls', true);
document.body.appendChild(audioElement);
const sourceElement = document.createElement('source');
audioElement.appendChild(sourceElement);
sourceElement.src = audioObjectURL;
sourceElement.type = 'audio/mp3';
I prefer just setting the mime type of the blob when creating it. The <source> element src attribute/property cannot be updated dynamically.
I have the same problem, and I spend a couple days troubleshooting this already.
As pwray mentioned in this other post, Safari requires file extensions for media requests:
HTML5 Audio files fail to load in Safari
I tried to save my blob to a file, named it file.mp3 and Safari was able to load the audio that way, but after I renamed the file to have no extension (just "file"), it didn't load.
When I tried the url created from the blob in another tab in Safari:
url = webkitURL.createObjectURL(blob);
it download a file right away called "unknown", but when I tried the same thing in Chrome (also on Mac), it showed the content of the file in the browser (mp3 files start with ID3, then a bunch of non-readable characters).
I couldn't figure out yet how I could force the url made of blob to have an extension, because usually it looks like this:
blob:https://example.com/a7e38943-559c-43ea-b6dd-6820b70ca1e2
so the end of it looks like a session variable.
This is where I got stuck and I would really like to see a solution from some smart people here.
Thanks,
Steven
Sometimes, HTML5 audio can just stop loading without any apparent reason.
If you take a look to the Media Events (http://www.w3schools.com/tags/ref_eventattributes.asp) you´ll see an event called: "onStalled", the definition is "Script to be run when the browser is unable to fetch the media data for whatever reason" and it seems that it should be helpful for you.
Try listening for that event and reloading the file if necessary, with something like this:
audio.addEventListener('onstalled', function(e) {
audio.load();
}, false);
I hope it helps!
Just use source tag in audio.
<audio controls>
<source src="blob" type="blobType">
</audio>
Related
It works on Edge, Chrome, Firefox, but not in safari. In Safari the iframe looks like it knows it should display a pdf (grey background) but with no pages inside it.
const pdf = new Blob([new Uint8Array(arrayBuffer)], { type: 'application/pdf' })
setDataStreamURL(window.URL.createObjectURL(pdf))
...
<iframe title={iframeTitle} className={className} src={dataStreamURL} type={type} />
It does work fine if I give it an url to a pdf like this one:
https://www.w3.org/WAI/ER/tests/xhtml/testfiles/resources/pdf/dummy.pdf
but I need to give it the blob:... url created by window.URL.createObjectURL(pdf)
I might be a little late in answering this but I faced this same issue while previewing a PDF from a blob url using an iframe on Safari. FileReader did the trick for me. From your code, instead of using window.URL.createObjectURL(pdf), read the blob which is here is pdf through a FileReader as shown bellow:
const pdf = new Blob([new Uint8Array(arrayBuffer)], { type: 'application/pdf' })
const reader = new FileReader();
reader.onload = () => {
const url = reader.result; // Use this `url` in iframe src
};
reader.readAsDataURL(pdf);
Note that this trick worked in Safari but might not work in other browsers, so use the blob url for other browsers and this trick for Safari.
I am trying to play back a video (currently hosted on S3 with public access) by creating a blob URL.
I have used Elastic Transcoder to encode the video since it is supposed to set the MOOV atom to the top (beginning).
I am unable to get the code to work but also found a working example: link here
Here is my code:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"/>
</head>
<body>
<video controls></video>
<script>
var video = document.querySelector('video');
var assetURL = 'https://ovation-blob-url-test.s3.amazonaws.com/AdobeStock_116640093_Video_WM_NEW.mp4';
// Need to be specific for Blink regarding codecs
// ./mp4info frag_bunny.mp4 | grep Codec
var mimeCodec = 'video/mp4; codecs="avc1.42E01E, mp4a.40.2"';
if ('MediaSource' in window && MediaSource.isTypeSupported(mimeCodec)) {
var mediaSource = new MediaSource;
//console.log(mediaSource.readyState); // closed
video.src = URL.createObjectURL(mediaSource);
mediaSource.addEventListener('sourceopen', sourceOpen);
} else {
console.error('Unsupported MIME type or codec: ', mimeCodec);
}
function sourceOpen (_) {
//console.log(this.readyState); // open
var mediaSource = this;
var sourceBuffer = mediaSource.addSourceBuffer(mimeCodec);
fetchAB(assetURL, function (buf) {
sourceBuffer.addEventListener('updateend', function (_) {
mediaSource.endOfStream();
video.play();
//console.log(mediaSource.readyState); // ended
});
sourceBuffer.appendBuffer(buf);
});
};
function fetchAB (url, cb) {
console.log(url);
var xhr = new XMLHttpRequest;
xhr.open('get', url);
xhr.responseType = 'arraybuffer';
xhr.onload = function () {
cb(xhr.response);
};
xhr.send();
};
</script>
</body>
</html>
What am I doing wrong? I looked at tools ie.e MP4Box or QT-FastStart but they seem to be kind of old school. I would also be willing to change from MP4 to M3U8 playlist but then I don't know what MIME types to use.
At the ned of the day I am trying to play back a video/stream and hide the URL (origin) potentially using blob.
Thank you guys!
So, first, even though this code seems to be taken from mozilla documentation site, there are a few issues - you are not checking the readyState before calling endOfStream thus the error you get is valid, secondly, the play() call is blocked by the autoplay policy changes. If you add an error handler, you will actually see that the appendBuffer fails. Here is the updated snippet:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"/>
</head>
<body>
<video controls></video>
<script>
var video = document.querySelector('video');
var assetURL = 'https://ovation-blob-url-test.s3.amazonaws.com/AdobeStock_116640093_Video_WM_NEW.mp4';
// Need to be specific for Blink regarding codecs
// ./mp4info frag_bunny.mp4 | grep Codec
var mimeCodec = 'video/mp4; codecs="avc1.42E01E, mp4a.40.2"';
if ('MediaSource' in window && MediaSource.isTypeSupported(mimeCodec)) {
var mediaSource = new MediaSource;
//console.log(mediaSource.readyState); // closed
video.src = URL.createObjectURL(mediaSource);
mediaSource.addEventListener('sourceopen', sourceOpen);
} else {
console.error('Unsupported MIME type or codec: ', mimeCodec);
}
function sourceOpen (_) {
//console.log(this.readyState); // open
var mediaSource = this;
var sourceBuffer = mediaSource.addSourceBuffer(mimeCodec);
fetchAB(assetURL, function (buf) {
sourceBuffer.addEventListener('updateend', function (_) {
// console.log(mediaSource.readyState); // ended
if (mediaSource.readyState === "open") {
mediaSource.endOfStream();
video.play();
}
});
sourceBuffer.addEventListener('error', function (event) {
console.log('an error encountered while trying to append buffer');
});
sourceBuffer.appendBuffer(buf);
});
};
function fetchAB (url, cb) {
console.log(url);
var xhr = new XMLHttpRequest;
xhr.open('get', url);
xhr.responseType = 'arraybuffer';
xhr.onload = function () {
cb(xhr.response);
};
xhr.send();
};
</script>
</body>
</html>
So lets advance to next issue - the actual error. So, using chrome://media-internals/ we can see that the video actually fails to load do to incompatibility with the ISOBMFF format:
I am not familiar with Elastic Transcoder, but it seems that is it not producing an mp4 file suitable for live streaming. Also, if using mse, putting moov at the beginning is not enough, the video actually has to meet all of the ISOBMFF requirements - see chapters 3. and 4.
The working sample you mentioned is not a valid comparison since it uses the blob for the src, where the ISOBMFF rules do not apply. If it is fine for you to go that way, don't use MSE and put the blob directly in the src. If you need MSE, you have to mux it correctly.
Ok, so I got the original code example to work by encoding my MP4 videos with ffmpeg:
ffmpeg -i input.mp4 -vf scale=1920:1080,setsar=1:1 -c:v libx264 -preset medium -c:a aac -movflags empty_moov+default_base_moof+frag_keyframe output.mp4 -hide_banner
Important is: -movflags empty_moov+default_base_moof+frag_keyframe
This setup also scales the video to 1920x1080 (disregarding any aspect ratio of the input video)
However, based on the comments of the original post, I do believe there might be a more efficient way to generate the blob url and ingest into a video tag. This example was copied straight from https://developer.mozilla.org.
If anyone comes up with a better script (not over-engineered), please post it here.
Thank you #Rudolfs Bundulis for all your help!
In page.open I can read about how to open a page using http.
How do use the WebPage module to open an url from the file system?
I have tried to omit http:// and have an url with ../some_dir/foo.html, but it seems to fail.
I Have tried this:
var page = require('webpage').create();
var fs = require('fs');
fs.changeWorkingDirectory('../foo/bar');
page.open('file://index.html', function(status)
{
console.log(status);
//console.log(document.title);
phantom.exit();
});
which outputs "fail".
I got the advice to test an absolute path, trying this:
var page = require('webpage').create();
var fs = require('fs');
page.open('file:///absolute/path/to/index.html', function(status)
{
console.log(page.title);
console.log($('body').length);
phantom.exit();
});
(with and without the call to changeWorkingDirectory, but with the same result)
I get a page title, but phantomjs reports that $ is undefined, jQuery is included in my html file (that is too large to post here). It is included like this:
<script type="text/javascript" src="js/jquery-1.11.1.min.js"></script>
Trying to run functions also produces errors like
Can´t find variable: function_name
Does the page/file you are opening already have jquery embedded on the page? If not, you will need to use either injectJs or includeJs on the page object before you can use the $ operator.
http://phantomjs.org/page-automation.html
If you are just doing a simple DOM selection, I would recommend just calling
document.querySelector('body').length
As these functions already exist within the Phantom instance.
I've been struggling days to get my KML-File working on a Google Maps API. I originally downloaded a GPX-File and made it to .kml to use it on my Maps.
Here's the HTML code:
<script type="text/javascript">
function initialize()
{
var mapProp = {
center: new google.maps.LatLng(47.2769,8.650017),
zoom:9,
panControl:true,
zoomControl:false,
mapTypeControl:true,
scaleControl:false,
streetViewControl:false,
overviewMapControl:false,
rotateControl:false,
mapTypeId:google.maps.MapTypeId.HYBRID
};
var map = new google.maps.Map(document.getElementById("map-canvas"), mapProp);
var ctaLayer = new google.maps.KmlLayer({
url: 'kml/route.kml'
});
ctaLayer.setMap(map);
}
google.maps.event.addDomListener(window, 'load', initialize);
</script>
What seems to be the problem? The Map gets displayed, but the Layer with KML-information does not appear. Does it have to do with a connection error to Google? My Firebug Console keeps reporting me network errors like:
"NetworkError: 407 authenticationrequired - https://maps.gstatic.com/intl/de_de/mapfiles/api-3/15/0/main.js"
BTW The KML File seems to be OK. I uploaded it on Google Maps and it does work.
Does anyone know a better solution to get my GPX cyclingcourse displayed on Google Maps?
You should host your kml file somewhere.
https://developers.google.com/kml/articles/pagesforkml?hl=en
I try to add a Google+ button to my page. The button itself works, but the text and the image are always empty. I annotated my body and some elements with the schema.org tags, but it is not working. What am I doing wrong here?
<body itemscope itemtype="http://schema.org/Article">
<div itemprop="name">This is the article name</div>
<img itemprop="image" src="thumbnail.jpg" />
<p itemprop="description">This is the description of the article.</p>
<g:plus action="share" href="testUrl"></g:plus>
<script type="text/javascript">
window.___gcfg = {
lang: 'en-US'
};
(function() {
var po = document.createElement('script'); po.type = 'text/javascript'; po.async = true;
po.src = 'https://apis.google.com/js/plusone.js';
var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(po, s);
})();
</script>
</body>
You can debug what microdata is getting parsed by using the Google Structured Data Testing Tool. This can help you to understand what Google is seeing on your microdata annotations.
Try removing the URL from your share / +1. The target Url will fallback to the current page, which I'm assuming is you want people to share.
If that's not the problem, there are a few other things that might help:
Your snippet:
Did you use the Google+ Snippet generator? It tends to work pretty well. Also, if you have a complex page, it can help to use meta tags in the <header> section to begin with for debugging.
Proxies:
Which brings me to the next point, if there is a proxy blocking your page or security that prevents people from accessing it, that will block the share preview renderer. Make sure your page (share target) is publicly accessible.
Another possibility: if your page is cached in your server's proxy, this will prevent the page from being updated by the share preview renderer.
If you add an anchor link or query string to the end of the url, e.g. foo.com/index.html vs foo.com/index.html#test vs foo.com/index.html?test=yes it should ensure that a cached version without microdata will be included.
It might be the href attribute on your g:plus tag. Instead, change it to data-href.