I'm doing a simple (not so simple for me) youtube BBCode that hides the embedded video in a dropdown, for when there's too many embedded videos, to not cause the web browser to lag trying to load them all at the same time.
I want the dropdown to display the video thumbnail (got that sorted) and title.
I don't know much about javascript, and the other questions and answers about this haven't worked for me. Example:Fetching YouTube video title from known video id Maybe I don't know how to implement it.
I just need the script to get the youtube vide title from the id and print it, really.
Edit: YouTube shut down the v2 API in 2015, take a look at the documentation of the new API v3 for a working code.
https://stackoverflow.com/a/30685729/753676
Copied from https://stackoverflow.com/a/10597710/753676
You can do this with plain JavaScript like this:
<script
type="text/javascript"
src="https://gdata.youtube.com/feeds/api/videos/videoid?v=2&alt=json-in-script&format=5&callback=getTitle">
</script>
And then:
function getTitle(data) {
var feed = data.feed;
var entries = feed.entry || [];
for (var i = 0; i < entries.length; i++) {
var entry = entries[i];
var title = entry.title.$t;
}
}
Unfortunately, since version 3. This is no longer possible with the youtube API without auth.
You can use noembed however without Auth if you want to grab basic info about the video.
I.E http://noembed.com/embed?url=http%3A//www.youtube.com/watch%3Fv%3DbDOYN-6gdRE&callback=my_embed_function
The response is JSON.
Related
I am making a board where users can post text, photo, and YouTube video link
I am trying to generate embed url from different types of YouTube urls that user copy and paste.
thanks Stackoverflow gods, I almost got it but not 100%
my js regex for ajax call to api
const ytRegex = /^(https?\:\/\/)?(www\.)?(youtube\.com|youtu\.?be)\/.+$/
...
let video = $('#post-video').val();
if (ytRegex.test(video)) {
video = $('#post-video').val();
} else {
video = 0;
}
...
my python regex
video_receive = request.form['video_give']
video_id1 = re.findall("(https?\:\/\/)?(www\.)?(youtube\.com)\/.+$", video_receive)
video_id2 = re.findall("(https?\:\/\/)?(www\.)?(youtu\.?be)\/.+$", video_receive)
video_id3 = re.findall("(https?\:\/\/)?(www\.)?(youtube\.com)\/(shorts).+$", video_receive)
if video_id1 :
link = video_receive.split("=")[1]
embed = "https://www.youtube.com/embed/"
video = embed + link
elif video_id2:
link = video_receive.split("/")[3]
embed = "https://www.youtube.com/embed/"
video = embed + link
elif video_id3:
link = video_receive.split("/")[4]
embed = "https://www.youtube.com/embed/"
video = embed + link
else:
video = 1
I am targetting 3 example types of yt urls with variables video_id#
https://www.youtube.com/watch?v=bjkVUaFhwno
https://youtu.be/BEkxOupf9Zc
https://youtube.com/shorts/UZsysDAUHAY?feature=share
1 is for desktop share url for yt video and yt shorts
2 is mobile share url for yt video
3 is mobile share url for yt shorts
In my python code,
if video_id1 & elif video_id2 works fine but problem arise after I added elif video_id3
when I test with https://youtube.com/shorts/UZsysDAUHAY?feature=share
my code stores https://www.youtube.com/embed/share into db
It seems like if video_id1 is working on video_id3 format. I assume this because the testing url has = before share and if video_id1 has .split("=") condition.
when I delete ?feature=share from the testing url, my web page give me error(POST...500 (INTERNAL SERVER ERROR)) not even submitting to db due to ajax call error. but works with original testing url.
Please advise me where I am getting wrong with yt shorts url.
The regex you use for the first pattern will also match your shorts urls, simply just check for pattern 3 first.
I am using Google Apps Script to create a page, on which I would like to embed maps. The maps themselves would be static, but the map could be different depending on other parameters (it’s a genealogy page, and I’d like to display a map of birth and death locations, and maybe some other map points, based on a selected individual).
Using Google’s Maps service, I know that I can create a map, with a couple points built in.
Function getMapImage() {
var map = Maps.newStaticMap()
.setSize(600,400)
.addMarker('Chicago, Illinois') // markers would be based on a passed parm; this is just test data
.addMarker('Pocatello, Idaho');
// *** This is where I am looking for some guidance
return(); // obviously, I'm not returning a blank for real
}
Within the map class, there are a number of things I can do with it at this point.
I could create a URL, and pass that back. That appears to require an API account, which at this point, I do not have (and ideally, would like to avoid, but maybe I’ll have to do that). It also appears that I will run into CORB issues with that, which I think is beyond my knowledge (so if that’s the solution, I’ll be back for more guidance).
I could create a blob as an image, and pass that back to my page. I have tried this using a few different examples I have found while researching this.
Server Side
function getMapImage() {
var map = Maps.newStaticMap()
.setSize(600,400)
.addMarker('Chicago, Illinois')
.addMarker('Pocatello, Idaho');
var mapImage = map.getAs("image/png");
// OR
// var mapImage = map.getBlob();
return(mapImage);
}
Page side
<div id=”mapDiv”></div>
<script>
$(function() {
google.script.run.withSuccessHandler(displayMap).getMapImage();
}
function displayMap(mapImage) {
var binaryData = [];
binaryData.push(mapImage);
var mapURL = window.URL.createObjectURL(new Blob(binaryData, {type: "image/png"}))
var mapIMG = "<img src=\'" + mapURL + "\'>"
$('#mapDiv').html(mapIMG);
}
</script>
The page calls getMapImage() on the server, and the return data is sent as a parm to displayMap().
var mapIMG ends up resolving to <img src='blob:https://n-a4slffdg23u3pai7jxk7xfeg4t7dfweecjbruoa-0lu-script.googleusercontent.com/51b3d383-0eef-41c1-9a50-3397cbe83e0d'> This version doesn't create any errors in the console, which other options I tried did. But on the page, I'm just getting the standard 16x16 image not found icon.
I’ve tried a few other things based on what I’ve come across in researching this, but don’t want to litter this post with all sorts of different code snippets. I’ve tried a lot of things, but clearly not the right thing yet.
What’s the best / correct (dare I ask, simplest) way to build a map with Google’s Map class, and then serve it to a web page?
EDIT: I added a little more detail on how the server and page interact, in response to Tanaike's question.
Modification points:
I think that in your script, Blob is returned from Google Apps Script to Javascript using google.script.run. Unfortunately, in the current stage, Blob data cannot be directly sent from from Google Apps Script to Javascript. I think that this might be the reason of your issue.
In this case, I would like to propose to directly create the data URL at the Google Apps Script side. When your script is modified, it becomes as follows.
Modified script:
Google Apps Script side:
function getMapImage() {
var map = Maps.newStaticMap()
.setSize(600, 400)
.addMarker('Chicago, Illinois')
.addMarker('Pocatello, Idaho');
var blob = map.getAs("image/png"); // or map.getBlob()
var dataUrl = `data:image/png;base64,${Utilities.base64Encode(blob.getBytes())}`;
return dataUrl;
}
Javascript side:
$(function() {
google.script.run.withSuccessHandler(displayMap).getMapImage();
});
function displayMap(mapURL) {
var mapIMG = "<img src=\'" + mapURL + "\'>"
$('#mapDiv').html(mapIMG);
}
In your Javascript side, $(function() {google.script.run.withSuccessHandler(displayMap).getMapImage();} is not enclosed by ). Please be careful this.
Note:
In my environment, when I saw <div id=”mapDiv”></div>, this double quote ” couldn't be used. So if in your environment, an error occurs by <div id=”mapDiv”></div>, please modify ” to " like <div id="mapDiv"></div>.
Reference:
base64Encode(data)
For now, I have a code in javascript to get a song title.
I need to change the script. The new server is not supporting javascript anymore.
I have a link where only the current song is showing.
But how can I get that into a javascript file?
http://blaffdf.nl/songtitle.php
Info on songtitle.php page (do I need a js script?).
var str = StreamInformation.SONGTITLE();
var str = $infoofphpfile;
Who can help me?
Many thanx!
I'm creating a Script for turning Evernote Notes into Omnifocus-Items, using Javascript for Automation. Currently, the script searches for items with a certain tag, which works great. Now, I want to unassign this tag or assign a different tag to ensure no Note gets added twice.
Looking into the Evernote Javascript for Automation Function Library in the Script Editor, I found the methods assign / unassign, which should do what I want - but I'm unable to use them.
This is a shortened version of my code:
Evernote = Application('Evernote');
var notes = Evernote.findNotes("tag:omni");
for(i = 0, len = notes.length; i < len; i++){
var note = notes[i];
// Add Tag inOmni
var tag = Evernote.Tag({name:'inOmni'});
Evernote.assign(tag, {to: note});
}
This gives me the ultra-useful error message Error 0: No error. I tried var tag = Evernote.Tag({name:'inOmni'}).make(); (using make()), which results in the script editor reminding me the tag "inOmni" already exists.
It seems like I need to get the actual Tag-Object for 'inOmni', but how can I do this?
Also, is there any documentation or sample code for Evernote JavaScript Automation?
I already asked this on Ask Different, but it didn't get any answers.
I know this topic is kinda stale… but still here's the code for creating an evernote.tag instance:
new_tag = Application('Evernote').make({
new:'tag',
withProperties:{name: 'new tag name'}
})
All credit goes to E_Mattsan who wrote this blog post:
https://blog.emattsan.org/entry/20150926/1443270834
I am currently trying to make a web editor allowing users to easily adjust basic settings to their audio files, as a plugin I've integrated wavesurfer.js as it has a very neat and cross-browser solution for it's waveform.
After indexing a must-have list for the functionalities I've decided that the cut and paste are essential for making this product work, however after spending hours of trying to figure out how to implement this in the existing library and even starting to rebuild the wavesurfer.js functionalities from scratch to understand the logic I have yet to succeed.
My question would be if anyone can give me some pointers on how to start building a cut and paste functionality or maybe even an example that would be greatly appreciated.
Thanks in advance!
wavesurfer plugin:
http://wavesurfer-js.org
plucked web editor
http://plucked.de
EDIT Solution (instance is the wavesurfer object.):
function cut(instance){
var selection = instance.getSelection();
if(selection){
var original_buffer = instance.backend.buffer;
var new_buffer = instance.backend.ac.createBuffer(original_buffer.numberOfChannels, original_buffer.length, original_buffer.sampleRate);
var first_list_index = (selection.startPosition * original_buffer.sampleRate);
var second_list_index = (selection.endPosition * original_buffer.sampleRate);
var second_list_mem_alloc = (original_buffer.length - (selection.endPosition * original_buffer.sampleRate));
var new_list = new Float32Array( parseInt( first_list_index ));
var second_list = new Float32Array( parseInt( second_list_mem_alloc ));
var combined = new Float32Array( original_buffer.length );
original_buffer.copyFromChannel(new_list, 0);
original_buffer.copyFromChannel(second_list, 0, second_list_index)
combined.set(new_list)
combined.set(second_list, first_list_index)
new_buffer.copyToChannel(combined, 0);
instance.loadDecodedBuffer(new_buffer);
}else{
console.log('did not find selection')
}
}
Reading this answer suggests you can create an empty AudioBuffer of the size of the audio segment you want to copy (size = length in seconds ⨉ sample rate), then fill its channel data with the data from the segment.
So the code might be like this:
var originalBuffer = wavesurfer.backend.buffer;
var emptySegment = wavesurfer.backend.ac.createBuffer(
originalBuffer.numberOfChannels,
segmentDuration * originalBuffer.sampleRate,
originalBuffer.sampleRate
);
for (var i = 0; i < originalBuffer.numberOfChannels; i++) {
var chanData = originalBuffer.getChannelData(i);
var segmentChanData = emptySegment.getChannelData(i);
for (var j = 0, len = chanData.length; j < len; j++) {
segmentChanData[j] = chanData[j];
}
}
emptySegment; // Here you go!
// Not empty anymore, contains a copy of the segment!
Interesting question. First word that comes to mind is ffmpeg. I can't talk from experience but if I was trying to achieve this I would approach it like:
Let's assume you select a region of your audio track and you want to copy it and make a new track out of it (later maybe just appending it to an existing track).
Use the getSelection() method provided by the nice wavesurfer.js library. This will give you startPosition() and endPosition()[in seconds].
Given those points you now can use ffmpeg on the backend to select the region and save it as a new file (eventually upload it to S3,etc.). See this thread to get an idea of how to call ffmpeg from your ruby app (the commandline parameters shown there can be helpful too).
Note that if you plan to copy and paste many regions to piece up a new track, making this in the backend all the time will probably make no sense, and I guess I'd try to look for a client-side JS approach.
I hope this is helpful at least for an easy use case, and gets you started for the rest ;)
Update
This might be worth reading.
Web Audio API, tutorial here.
HTML5 audio - State of play. here(don't miss the section on TimeRanges, looks like a reasonable option to try).
This one(Outdated, but worth a look, interesting links).