Differentiate between youTube URLs and the file names of embedded MP4s? - javascript

I want to, in my init() function, check to see if the video is either a youtube URL or a file name.
Does this seem suitable or is there some kind of edge case I might be missing?
function init(){
playerSource = Document.getElementById('vid').src;
if ( playerSource.includes("https://www.youtube") ){
//Call to function that begins setting up YT iFrame API
}
}
Thanks in advance!

You can validate the youtube URL using below regex.
regExp = /^(?:https?:\/\/)?(?:www\.)?(?:m\.)?(?:youtu\.be\/|youtube\.com\/(?:embed\/|v\/|watch\?v=|watch\?.+&v=))((\w|-){11})(?:\S+)?$/
Youtube has different url forms depending upon where you are taking from
Normal Url
https://www.youtube.com/watch?v=12345678901
Share Url
https://youtu.be/12345678901
Share Url with start time
https://youtu.be/12345678901?t=6
Mobile browser url
https://m.youtube.com/watch?v=12345678901&list=RD12345678901&start_radio=1
Long url
https://www.youtube.com/watch?v=12345678901&list=RD12345678901&start_radio=1&rv=smKgVuS
Long url with start time
https://www.youtube.com/watch?v=12345678901&list=RD12345678901&start_radio=1&rv=12345678901&t=38
You can check these URL validation below
https://regex101.com/r/7a1lGH/1

Related

Passing a local html page with querystring in windows phone

I'm trying to get pdf.js to work locally on a windows phone app written in Xamarin but I can't understand why if I pass a url without any querystring it works:
url = "Assets/pdfjs/web/viewer.html"
Uri uri = new Uri(url, UriKind.Relative);
PdfWebViewer.Source = uri;
The above displays the pdf.js viewer correctly but with no pdf file of course but if I change the url to:
url = "Assets/pdfjs/web/viewer.html?file=test.pdf"
Uri uri = new Uri(url, UriKind.Relative);
PdfWebViewer.Source = uri;
I just get a page not found. Note the javascript is enabled.
I've added the various web browser events to see if I could spot anything else, and when I call the url without a querystring, it calls the Navigating event followed by the Navigated event but as soon as I specify a querystring, it triggers the Navigating followed by NavigationFailed event but I can't see the error as the exception returned in e.exception is null.
Am I missing something?? Is this not allowed?
Thanks.
UPDATE:
It may not be a problem with Xamarin as I've just tried the same thing in a WP8.1 using the WebBrowser control and I get exactly the same behaviour.
Private Sub Button_Click(sender As Object, e As RoutedEventArgs)
WebBrowser.IsScriptEnabled = True
WebBrowser.Source = New Uri("/Html/Viewer.Html?file=1", UriKind.Relative)
End Sub
My Viewer.html is the most basic page you could have:
<html>
<body>
Test
</body>
</html>
Get rid of the query string and the web browser will display Test. Any ideas??

Remove parameter from url not working

I'm attempting to remove a url parameter status from the url but in the following alert, the parameter is still there.
var addressurl = location.href.replace(separator + "status=([^&]$|[^&]*)/i", "");
alert(addressurl);
location.href= addressurl;
How do i solve?
You are confusing regex with strings.
It should be:
var addressurl = location.href.replace(separator, '').replace(/status=([^&]$|[^&]*)/i", "");
Javascript context in web pages are to the page you are working on.
When you reload, redirect or move to any other page, javascript changes done in previous page will not be there. This has to be handled from server side.
Refresh repeats the last request to the server, which is going to ignore your javascript changes. Instead navigate to the new url with window.location = addressurl;

Create shareable urls from lighboxes that opens video on pageload?

I am using a jquery lightbox plugin on a Wordpress site that opens videos fetched from rss in lighbox and I want to be able to construct a URL like which will send the user to my website and open the video on pageload. This with several videos on the same page.
Then display a button with each videos unique url as a sharebutton.
From googling around something like this could be a way?
jquery get
pass query param with unique url
jquery to open lightbox
jquery to load video plugin (youtube etc.)
Im not good at either jquery or vanilla js, but trying to grasp the concept. Any help appreciated.
Using a URL Query param is a good option to accomplish this. What we'll do is have a script that checks whether or not the Param exists. I've included code on how to do this. It's all done in javascript.
//This function will check if the current page has the query param of 'video' (or whatever you set it to) & then call your lightbox function.
//Put this in the footer of that page
function checkParam() {
var isVideo = getParameterByName('video');
if(isVideo == 'true') {
//call lightbox open function
}
}
checkParam();
//I'll use this function to get URL query params: http://stackoverflow.com/a/901144/2106563
//This should also go in the footer of the page
function getParameterByName(name) {
name = name.replace(/[\[]/, "\\[").replace(/[\]]/, "\\]");
var regex = new RegExp("[\\?&]" + name + "=([^&#]*)"),
results = regex.exec(location.search);
return results === null ? "" : decodeURIComponent(results[1].replace(/\+/g, " "));
}
As for adding a youtube video within your lightbox, it can be done pretty easily with a link similar to this:
href="//www.youtube.com/embed/dQw4w9WgXcQ?feature=player_detailpage&rel=0&autoplay=1
The only part that you need to change between videos is: dQw4w9WgXcQ. That can be seen in the URL in the browser.
You'll notice that there are Query Params in the URL. One of them is autoplay. There are a bunch of others too if you wish to customize the link a bit more.

Reload a page inside iframe

I have an iframe and I want to reload the currently displayed page on button press.
HTML:
<iframe id="webView"></iframe>
JS:
function reloadPage()
{
var webView = document.getElementById("webView");
//CODE
}
Inside the reloadPage() method I tried different solutions:
Call reload()
webView.contentWindow.location.reload();
This just doesn't work because the pages loaded inside the iframe are from a different domain than the main page.
Set src
webView.src = wevView.src;
It gives wrong result because it contains the initial url that I set to the iframe, non the current one.
Set location
webView.contentWindow.location = webView.contentWindow.location
I was expecting it to not work with urls from different domains (the same as calling reload()), but actually it works and also gives a good result.
Good but not perfect: the location object holds the current url but strips any parameter.
For example if the frame is currently displaying the following url:
http://www.myserver.com/thatsite/?page_id=11
the location object contains this url:
http://www.myserver.com/thatsite/
So this one works well as long as there are no parameters in the url.
Better solution?
I rely heavly on urls with parameters (mostly WordPress installations) so i need a way to keep them while reloading.
Anyone knows a solution to achieve this?
just not possible, see this thread:
Get current URL from IFRAME
and this one
How do I get the current location of an iframe?
Since setting location works, you could use location.search to retrieve the GET parameters and reconstruct the URL that way.
Example:
webView.contentWindow.location = webView.contentWindow.location + webView.contentWindow.location.search

Facebook Changes Page URL but does not actually change page

I was on Facebook and realised that when I change page the page address changes but the page does not redirect but loads via ajax instead.
You can tell because the console does not clear when you click the link but the URL changes.
Weird, but anyone know how it is done?
Facebook runs with massive AJAX calls that changes the page state and the sections.
So to make a page linkable to somebody by copying the URL address, every time you call an AJAX relevant function they updates the URL using a fake anchor "#!" plus the real address.
Simply when you load the real page (using F5 or linking that so somebody) a JS parser catchs the string after #! (if there is) and redirect you to baseaddress + that.
I belive something like this (untested):
var urlstr = new String(location.href);
var urlparm = urlstr.split('#!');
var last = urlparm.length - 1;
if( (urlparm[last] != urlparm[0]) && (urlparm[last] != "/") )
{ var redir = "http://www.facebook.com" + urlparm[last];
location.href = redir;
}
In Google Chrome instead the URL really changes, I'm according that there is an hash somewhere, but I don't know where and how.

Categories