I am trying to do something when the user clicks "play" on a YouTube video by using YouTube's API:
<script type="text/javascript">
var player;
function onYouTubePlayerAPIReady() {
player = new YT.Player('player', {
events: {
'onReady': onPlayerReady,
'onStateChange': onPlayerStateChange
}
});
}
function onPlayerReady(event) {
event.target.playVideo();
}
function onPlayerStateChange(event) {
alert('not cool')
if (event.data == YT.PlayerState.PLAYING) {
alert('cool');
}
}
</script>
<iframe id="player" width="970" height="582" src="http://www.youtube.com/embed/6oE-NlWHVuQ?enablejsapi=1" frameborder="0" allowfullscreen></iframe>
It gives the error:
An invalid or illegal string was specified" code: "12
What am I doing work?
Thanks!
Problem solved :) Seems like it doesn't work on localhost.
The code you have shown works on localhost too, it might be problem with the video you have embedded or the video has disabled the embedding property.
It works on localhost, too as soon as you add the "origin" parameter to your src.
If you do write the tag, then when you construct the YT.Player object, you do not need to specify values for the width and height, which are specified as attributes of the tag, or the videoId and player parameters, which are are specified in the src URL. As an extra security measure, you should also include the origin parameter to the URL, specifying the URL scheme (http:// or https://) and full domain of your host page as the parameter value. While origin is optional, including it protects against malicious third-party JavaScript being injected into your page and hijacking control of your YouTube player.
<iframe ... src="http://www.youtube.com/embed/6oE-NlWHVuQ?enablejsapi=1&origin=http://somewebsite.com" ...></iframe>
You can write whatever you want for this value, but you should prefer the domain which you own.
Related
Vue component has a photo block and the "edit" button.
<template>
<div>
<tui-image-editor ref="editor" > </tui-image-editor>
<div class="">
<img :src="img">
<button #click="edit()">Edit</button>
</div>
</div>
</template>
<script>
export default {
data() {
return {
img: "cdn.domain.shop/eaa49b02e350627622904290a83599d6.png",
};
},
methods: {
edit() {
this.$refs.editor.invoke("loadImageFromURL", this.img, "Editable image");
},
},
};
</script>
As a photo editor, I use TUI image editor. In the click handler, I pass the url to the editor by loadImageFromURL function
when I click the "edit" button in Chrome in Windows I get an error
Access to image at
'cdn.domain.shop/eaa49b02e350627622904290a83599d6.png' from origin
'example.org' has been blocked by CORS policy: No
'Access-Control-Allow-Origin' header is present on the requested
resource.
But when I do the same thing in Chrome in Ubuntu, everything works fine.
What am I doing wrong?
just add random string to url
this.$refs.editor.invoke("loadImageFromURL",this.img+'?'+Math.random(), "Editable image");
the error was due to caching in the browser
After that you have to make sure that every URL you request from Chrome and Safari uses http:// instead of https://. HTTPS retrieval will not work in these browsers at all.
some allows both http and https requests I solved it with a small regular expression that replaced our https URL string with http.
What's the quick solution ?
Add the attribute crossorigin="anonymous" in the <img> tag that displays the image before opening it in the editor.
ie: <img src="targetUri" crossorigin="anonymous" />
Explain the issue and solution
The main issue is related to caching and how the browser send the Origin header.
First you have to know that by default the browser does not send the Origin header when you load an image with the <img> tag that does not have the crossorigin="anonymous" attribute.
More info
What's happening is that the browser tries to load the image from the <img> tag before the image editor is opened, and the puts it into its cache.
So when you open the editor, it tries to load the image a second time, and you actually get a cached response of the first request that was made without the Origin header. Without this header, that cached response does not contain all the allow-control-* headers necessary to pass the CORS check, that why you get the error.
You can check this, by opening Chrome's inspector with "disable cache" checked. It should work.
The previous posts that suggested to include a parameter ?t=<random_number> had the effect to bypass the browser cache, but this solution is not possible when using pre-signed urls.
So adding crossorigin="anonymous" in the img tag should solve the problem.
Does anyone have examples of Google Street View working on Squarespace using the API?
I have been able to use other examples to display google maps (non street view) but when I try to get Google's street view example to work... nothing.
Here is my attempt:
http://keweenaw.squarespace.com/googlemapsapitest
I have this code in my page header code injection
<style>
html, body {
height: 100%;
margin: 0;
padding: 0;
}
#street-view {
height: 100%;
}
</style>
<script>
var panorama;
function initialize() {
panorama = new google.maps.StreetViewPanorama(
document.getElementById('street-view'),
{
position: {lat: 37.869260, lng: -122.254811},
pov: {heading: 165, pitch: 0},
zoom: 1
});
}
</script>
<script async defer
src="https://maps.googleapis.com/maps/api/js?key= AIzaSyBSlsYgCGP7KfS5doe_q0X9guiJ3WNrfns&callback=initialize">
</script>
And this in a code block on the page:
<div id="street-view""></div>
You've got a number of issues which, once corrected, do in fact generate a working embedded Google Street View on a test Squarespace account.
You have a space at the beginning of your API key, causing it to be invalid.
You have an extra set of double quotes on <div id="street-view""></div>
Your CSS rule `#street-view {height: 100%;} won't work. Briefly put, you'll have to define a height in pixels, like "400px" or a similar 'fixed' unit.
You are loading the API over HTTPS but your site is HTTP. You need to either enable SSL on your Squarespace site or change the API url to http://maps.googleapis.com/maps/...etc. The prior is likely preferred.
By opening your browser's console (F12) you can see the specific error messages and work through them one by one (although, having seen these before certainly makes diagnosis faster).
To get you back on the right track, I would put the following code entirely in a code block on the page, where you want the map to appear. You can adjust width and height via your CSS. Once you get it working, you can experiment (if you choose) with moving your CSS to the CSS Editor and your Javascript to Code Injection.
<div id="street-view"></div>
<style>
#street-view {
height: 400px;
width: 100%;
}
</style>
<script>
var panorama;
function initialize() {
panorama = new google.maps.StreetViewPanorama(
document.getElementById('street-view'),
{
position: {lat: 37.869260, lng: -122.254811},
pov: {heading: 165, pitch: 0},
zoom: 1
}
);
}
</script>
<script async defer src="http://maps.googleapis.com/maps/api/js?key=AIzaSyBSlsYgCGP7KfS5doe_q0X9guiJ3WNrfns&callback=initialize"></script>
Also, note that the code above is using HTTP for the Maps API so that it will work with your current configuration. If you choose to enable SSL as mentioned, you'll need to change the Maps API url to HTTPS.
Here is a working example, using HTTPS. This example will quit working soon.
I use Muse and I want to be able to share the current URL dynamically. I have achieved this with Facebook and Twitter. However Google Plus is still evading me.
This is the JS code I have been working with.
<script language="javascript">
function gplussharecurrentpage() {
sharelink = "https://plus.google.com/share?url={URL}"+url;
newwindow=window.open(sharelink,'name','height=400,width=600');
if (window.focus) {newwindow.focus()}
return false;
}
var url="www.google.co.uk";
googleplusbtn(url);
</script>
I have a button linked to activate the script however it comes back with a this link is not valid.
Any ideas?
i've got two PHP projects in which i use the Google Maps Api to convert adress data into geo coordinates. The first project uses this code (i post ir here in a shorted version) and works:
<script src="https://maps.googleapis.com/maps/api/js"></script>
<script>
function latlong(adresse) {
geocoder = new google.maps.Geocoder();
if (geocoder) {
geocoder.geocode( { 'address': adresse}, function(results, status) {
if (status == google.maps.GeocoderStatus.OK) {
// I NEVER GET IN HERE with my second project
alert("It works!");
} else {
alert('It works not');
}
});
}
}
// Start Converting
latlong('teststreet 10, 91578 Leuterhausen');
As you can see, i don't use an API Key in this section
<script src="https://maps.googleapis.com/maps/api/js"></script>
but it works anyway (Alert box "It works" is shown).
Now i have built another project with the same code but it does not work (Alert Box "It works not" is shown).
Do you have any idea...
...why the first project works WITHOUT an API key?
...what i have to change in the code so that the second project works?
When i use this code in the header
<script src="https://maps.googleapis.com/maps/api/js?key=[here i place in my key]"
async defer></script>
i get the error message: "Google Maps API error: ApiNotActivatedMapError https://developers.google.com/maps/documentation/javascript/error-messages#api-not-activated-map-error"
How can i activate the key?
Every help is appreciated.
Best regards
Daniel
If the app has been running before google enforced the use of API keys the app should still run, apps published after the change will require the key ...read here : https://developers.google.com/maps/pricing-and-plans/standard-plan-2016-update
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>