Here is some link which provides subtitle list of youtube video in xml format.
'https://www.youtube.com/api/timedtext?lang=en&v=6dlr-1Qk8Uc'
'http://video.google.com/timedtext?type=track&v=zenMEj0cAC4&id=0&lang=en'
But it is not applied for all videos.
Some videos have subtitle(cc) icon at bottom of video and on click this subtitle appears, but this links cannot return the subtitle data.
Then I have checked the respose data on click the cc icon , it return data of all videos which have subtitle.
But I cannot get how to call this api using node js.
Instead of use the YouTube Data API - caption1 for retrieve the captions of a video, you can also use an AJAX callback for get the captions.
1If you want use the YouTube Data API for query the captions, I advise you read the documentation carefully.
In this example, an AJAX callback is used for retrieve the captions from a given YouTube video.
Using the XML parser, the response of the previous AJAX callback is iterated in a for-loop for get the captions:
// Ajax callback to the YouTube channel:
$.ajax({
type: "GET",
url: "http://video.google.com/timedtext?type=track&v=zenMEj0cAC4&id=0&lang=en",
crossDomain: true,
}).done(function(data) {
getCaption(data);
});
// Variables.
var parser, xmlDoc;
var HTML_captions = "";
// Parse the AJAX response and get the captions.
function getCaption(data) {
try {
// Loop the results of the ajax:
for (var i = 0; i < data.getElementsByTagName("transcript")[0].childNodes.length; i++) {
HTML_captions += data.getElementsByTagName("transcript")[0].childNodes[i].innerHTML + "<br/>";
}
// Preparing captions...
fillData();
} catch (err) {
console.log(err);
alert('Error at getCaption function - see console form more details.');
}
}
// Fill the data "captions" in a HTML "div" control.
function fillData() {
try {
document.getElementById("demo").innerHTML = HTML_captions;
} catch (err) {
console.log(err);
alert('Error at fillData function - see console form more details.');
}
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>
<div class="infoVideo">
<span>These are the captions of the following YouTube video:</span>
<br/>
<span>Title: How Turbochargers Work</span>
<br/>
<span>URL: https://www.youtube.com/watch?v=zenMEj0cAC4</span>
</div>
<br/>
<div id="demo"><i>Loading captions...</i></div>
Related
Background:
I'm coming from the server-side world of Rails, and trying to figure out the Netlify static html + serverless functions approach to doing a few extremely basic landing page web apps which need a serverless function to insert data into an HTML page.
I'm trying to start with the simplest possible case of an HTML page with a form and a serverless function that returns a result back to the page. (e.g., no static site generators).
I have not found any Netlify tutorials that show how a HTML page can have a form that posts to a function which then returns the result of that function back into the same web page.
The simplest sample app I can think of is a page asks a question, the user POSTs their answer to a serverless function, and the same HTML page is updated with the result of the function... a trivial case being to display "your answer was X" above the form. (It is immaterial to me whether the actual page is rewritten again with the result string included, or the result string is dynamically inserted by somehow poking the string to the div, so long as the result string originates in a serverless function; integrating serverless functions results with HTML pages is what I'm trying to learn.)
In the code below a simple HTML page below displays a form, the form POSTs an answer to a javascript function check_answer.js, and the javascript function erases the current page and displays the string "Your answer was XXXX".
That was simple to do, and lots of tutorials show how to have a function accept a form post then return a result string to the browser (overwriting the prior page).
My question:
How can the serverless function insert the result string back into the original HTML page (at the div id="answer") instead of outputting the result to a blank page?
Current code:
# index.html
<html>
<head>
<title>A test form</title>
</head>
<body>
<div id="answer">
</div>
<p>How much is 1 + 3?</p>
<p>form using POST:</p>
<form method="post" name="calc 2" action="/.netlify/functions/check_answer" id="calcform2" data-netlify="true" >
<p>
<label for="my_answer">Answer:</label>
<input type="text" name="my_answer" id="my_answer">
<label for="my_comment">Comment:</label>
<input type="text" name="my_comment" id="my_comment">
</p>
<p>
<input type="submit">
</p>
</form>
</body>
</html>
# functions/check_answer.js
exports.handler = async event => {
console.log(event.queryStringParameters);
console.log(event);
console.log(event.body);
if (event.httpMethod == 'POST')
{
console.log('is POST');
var params = parseQuery(event.body);
console.log(params);
var answer_string = params['my_answer'];
}
else
{
console.log('is GET');
var answer_string = event.queryStringParameters.my_answer || 'empty'
};
return {
statusCode: 200,
body: `Your answer was ${answer_string}`,
}
}
// handle parsing form query aaaa=bbbbb&cccc=dddd into hash object
// from https://stackoverflow.com/a/13419367/597992
function parseQuery(queryString) {
var query = {};
var pairs = (queryString[0] === '?' ? queryString.substr(1) : queryString).split('&');
for (var i = 0; i < pairs.length; i++) {
var pair = pairs[i].split('=');
query[decodeURIComponent(pair[0])] = decodeURIComponent(pair[1] || '');
}
return query;
}
I have recently created a sharepoint list that has a multitude of radio button choices. When the user creates a new entry, they pick a radio button and submit. However, when they view using the display form, only the choice that they selected appears. I want to make it so that ALL of the possible choices appear, but it still shows what they have picked. Is there any possible way of doing this?
This is what appears currently
This is what I want (and what users see when they submit a new item)
We can use REST API to get all the filed choices and then append the HTML to the field in the display form using jQuery. The following code for your reference. Add the code into a script editor web part in the dispform.aspx page.
<script src="//code.jquery.com/jquery-3.3.1.min.js" type="text/javascript"></script>
<script type="text/javascript">
$(function () {
var fieldTitle="AP Coding/Slip Claim Forms*/Limited Purchase Order";
var currentFieldValue=$("h3.ms-standardheader:contains('"+fieldTitle+"')").parent().next()[0].innerText.trim();
var fieldHTML=GetFieldChoices(currentFieldValue,fieldTitle);
$("h3.ms-standardheader:contains('"+fieldTitle+"')").parent().next().html(fieldHTML);
});
function GetFieldChoices(currentFieldValue,fieldTitle){
var listId = _spPageContextInfo.pageListId.replace("{","").replace("}","");
var fieldHTML="";
var url = _spPageContextInfo.webAbsoluteUrl + "/_api/web/lists(guid'"+listId+"')/fields?$select=Choices&$filter= Title eq '"+fieldTitle+"'";
$.ajax({
url: url,
method: "GET",
async:false,
headers: { "Accept": "application/json; odata=verbose" },
success: function (data) {
var choices = data.d.results[0].Choices.results;
$.each(choices,function(index,choice){
if(choice==currentFieldValue){
fieldHTML+="<input type='radio' disabled='disabled' checked='checked' name='"+fieldTitle+"' value='"+choice+"'>"+choice;
}else{
fieldHTML+="<input type='radio' disabled='disabled' name='"+fieldTitle+"' value='"+choice+"'>"+choice;
}
if(index<choices.length){
fieldHTML+="<br>";
}
});
},
error: function (error) {
console.log(JSON.stringify(error));
}
});
return fieldHTML;
}
</script>
I've been using X-Ray to scrape website which has been working really well. I can use it bring in images very easily. The one item I run into is I don't see an easy way to scrape a background image. Say I have a div where they are setting a style attribute on that dev and then setting the URL im not sure how to get the background-image url from this. I don't think I can just pass the featured image attribute the css property such as
.featured-image.attr('background-image');
const getWebsiteContent = async (blogURL, selector) => {
try {
return await x(blogURL, selector, [{
slug: 'a#href',
featuredImage: 'img#src'
}])
.paginate(`${pagi}#href`)
.limit(200)
.then((response) => {
spinner.succeed('Got the data');
return response;
})
} catch (error) {
throw new Error('Cannot get Data from website, try checking your URL');
}
};
For anyone that wants a solution to this with X-ray scraper what I ended up doing is pulling the attribute from the selector you pass into the object.Given the html looks like the following.
<div class="img" style="background-image: url('../path-to-img.jpg')"></div>
Instead of writing .img#src you could write .img#style and this would return to you the style attribute. From there you would need to use a regex to remove the rest of the un-needed data that is not the URL of the image.
I need to load the YouTube API locally (Google Extension not allowing external scripts). So I downloaded the files into my directory:
https://www.youtube.com/player_api
https://s.ytimg.com/yts/jsbin/www-widgetapi-vfl4qCmf3.js
However, when I try to programmatically inject this via a content script, it gives the following error:
Uncaught ReferenceError: YTConfig is not defined
To the OP: You were almost there! I'd like to acknowledge Jonathan Waldman, MSDN author, for mentioning this technique during one of his training sessions...
To review, YTConfig is defined at:
http://www.youtube.com/iframe_api
And here:
http://www.youtube.com/player_api
The iframe_api is the preferred link to use.
To recap, the links you provide above each link to JS code:
https://www.youtube.com/player_api
https://s.ytimg.com/yts/jsbin/www-widgetapi-vfl4qCmf3.js
You also need a Div tag with an id of "player" and another Script tag that lets you specify which video you want to see. So there are four Script tags total:
For content in iframe_api
For content at https://s.ytimg.com/yts/jsbin/www-widgetapi-vfl4qCmf3.js
For the player Div tag:
<div id="player"></div>
For JavaScript that configures the video
This translates loosely to:
<script>...place the player Div here</script>
<script>...place code from www-widgetapi-vfl4qCmf3.js here...</script>
<script>...place code from iframe_api here...</script>
<script>...place the code below here</script>
Here is the code for the final Script tag (note that you will likely want to change the videoId property so that it points to the ID of the desired video on the YouTube site):
<script>
var player;
function onYouTubeIframeAPIReady() {
player = new YT.Player('player', {
height: '390',
width: '640',
videoId: 'M7lc1UVf-VE',
events: {
'onReady': onPlayerReady,
'onStateChange': onPlayerStateChange
}
});
}
// 4. The API will call this function when the video player is ready.
function onPlayerReady(event) {
event.target.playVideo();
}
// 5. The API calls this function when the player's state changes.
// The function indicates that when playing a video (state=1),
// the player should play for six seconds and then stop.
var done = false;
function onPlayerStateChange(event) {
if (event.data == YT.PlayerState.PLAYING && !done) {
setTimeout(stopVideo, 6000);
done = true;
}
}
function stopVideo() {
player.stopVideo();
}
</script>
When I did the above, the page worked and I had all of the YouTube code local to my development machine.
jqueryvalidationengine-en.js :
"ajaxUserCall": {
"url": "ajaxValidateFieldUser",
// you may want to pass extra data on the ajax call
"extraData": "name=eric",
"alertTextOk":"* This user name can be used and is available",
"alertText": "* This user is already taken",
"alertTextLoad": "* Validating..., please wait"
}
xyz.html:
<input class="validate[ajax[ajaxUserCall]] text-input" type="text" name="requir" id="requir" title="Text value is required"/>
function beforeCall(form, options){
if (console)
console.log("Right before the AJAX form validation call");
return true;
}
// Called once the server replies to the ajax form validation request
function ajaxValidationCallback(status, form, json, options){
if (console)
console.log(status);
if (status === true) {
alert("the form is valid!");
// uncomment these lines to submit the form to form.action
// form.validationEngine('detach');
// form.submit();
// or you may use AJAX again to submit the data
}
}
jQuery(document).ready(function(){
jQuery("#formID").validationEngine({
ajaxFormValidation: true,
onAjaxFormComplete: ajaxValidationCallback,
onBeforeAjaxFormValidation: beforeCall
});
});
Above is my html and jqueryengine-en.js code
And in servlet i am getting request.getParameter("requir") is null.
Please post me your answers regarding the above problem as i was unable to find much about Jquery validation engine on net and please share some link from where i can study more of it.
Please help me in getting requestParameter("requir") with form text box value.
Thanx in advance.