I'm building a PhoneGap Build app that needs to play video. Unfortunately, no native capabilities work, and using HTML5 across all platforms/phones seems to be dubious. Enter launching the phone's native video player.
Problem is, whenever I do this, the window loads up a new, blank page which then launches the native player. After the native player is done, I get brought back to the black page, which then fully reloads the app. I've tried this in the browser as well, and get the same thing.
I'd like a flow that goes "Click => native player launched => native player done => return to app" like what goes down on m.youtube.com. Can't figure it out.
In javascript, I've tried standard stuff (location.href, window.location.redirect, window.location.reload.) I've also dug into the code on m.youtube.com, I don't see anything that would result in this functionality. I tried directly copy-pasting the rtsp:// link into my app, and got the same white page redirect situation that I do with my own http:// video links.
Help here would be awesome. I wouldn't be surprised if this solution exists somewhere on StackOverflow or the Googs, but I've searched for 3 hours and am finding it quite hard to filter the insane variety of search results that come from the search terms I'm using. Let me know if any more information would be helpful. It's kind of worthless, but here's the basic code I've thrown together for this (it's in Sencha Touch, just FYI):
{
name : 'video',
padding : '0 10 0 10',
html : '<a href=javascript:window.location.reload("rtsp://v6.cache3.c.youtube.com/CjYLENy73wIaLQl067BbAoc9uRMYDSANFEIJbXYtZ29vZ2xlSARSBWluZGV4YOuLh9TnzLTcTQw=/0/0/0/video.3gp")>LINK</a>',
},
Have you tried (at least for Android) the VideoPlayer plugin?
This blog post show that it should possible with phonegap
Basically add an iframe with your youtube url as source:
<html>
<head>
<title>YouTube video</title>
<meta name="viewport" content="width=device-width; initial-scale=1.0; maximum-scale=1.0; user-scalable=0;" />
<meta name="apple-mobile-web-app-capable" content="yes" />
<meta name="apple-mobile-web-app-status-bar-style" content="black" />
<script src="phonegap-1.2.0.js"></script>
</head>
<body>
<iframe width="560" height="315" src="http://www.youtube.com/embed/9HDeEbJyNK8" frameborder="0" allowfullscreen></iframe>
</body>
</html>
And change your phonegap.plist file to:
MediaPlaybackRequiresUserAction: NO
AllowInlineMediaPlayback: YES
OpenAllWhitelistURLsInWebView: YES
ExternalHosts
*.youtube.com
*.ytimg.com
This isn't really a successful answer, but after obsessively researching this, everything I found indicated that this wasn't possible with PhoneGap Build. I ended up moving to regular PhoneGap and used the VideoPlayer plugin as a result.
Related
Currently, I'm using this to make a beautiful embed:
<meta name="description" content="Watch non-copyrighted media online.">
<meta name="keywords" content="bruh,dev,BruhDev,memes,meme,code,developer,software,engineer,coder,code,programmer,program,develop,develope,games,media,movies,tv,shows,movie,show,series,episode,season,seasons,episodes,netflix,hbo,hulu">
<meta name="theme-color" content="#FFA90A">
And this is how it looks like on Discord:
click here for image
But this is not enough, I want to embed an entire player into this, which you can see on
http://media.bruhdev.com/media/movies/watch/3, like on Youtube: click here for image
For the video, I use this HTML (view page source to see): http://media.bruhdev.com/media/movies/embed/3
How do I put this on the embed of my site?
*Don't mind the actual video, that's the thing about all my friends wanting their funny video's on here.
Thank you ahendwh2 for the answer, for anyone finding this post, here is an answer: https://stackoverflow.com/a/47112759/7409991
First post here so let me know if something is done the wrong way, however.
I've never taken into account what it would actually take to do this, but to make a long story short, There's a section of my website that I'm creating for Class Work that I want to resemble "Rainymood.com"
RainyMood is a website in which there is a looping 30m audio file (which I have already) as well as "Daily Song Picks" that can play simultaneously with the rain ambiance to create peaceful sounds by simply attaching the youtube video you have in mind to the end of the URL
For example, changing "https://RainyMood.com" to "https://rainymood.com/watch?v=ZBrT97qJ-3w" changes the source of the embedded youtube video to play Sasuke's Theme from the Naruto OST
I've looked around for how to do this but I haven't found what I was looking for.
I have a basic understanding of Javascript but I'm not sure where to even begin with this one.
You can make a simple copy that's functionally similar to the one used on rainymood.com with just a few lines of HTML. All you need is an audio tag, source tag, and an iframe tag. Put your audio source in the source tag as shown, and place your embedded Youtube link in the iframe as shown.
Here's the code:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<audio controls loop>
<source src="https://rainymood.com/audio1112/0.m4a" type="audio/mp4" />
</audio>
<iframe src="https://www.youtube.com/embed/ZBrT97qJ-3w" allowfullscreen="">.
</iframe>
</body>
</html>
If you want to make your own audio player using Javascript, then take a look at this tutorial. Although it's for making a video player, the same concepts apply to controlling audio as well.
I'm attempting to set a custom thumbnail for when people share my website on Facebook. I followed this post here: How does Facebook Sharer select Images and other metadata when sharing my URL?
It seems this info may be outdated because I am unable to get it to work. Can anyone advise if there has been a change and how to handle this now?
I currently have this in my head but It is not working:
<head>
<meta property="og:image" content="http://placehold.it/350x150"/>
<meta property="og:image:secure_url" content="https://placehold.it/350x150" />
</head>
Figured it out. Facebook simply had not refreshed my images yet. I found this tool to help with this process:
https://developers.facebook.com/tools/debug/
I am trying to share a custom HTML/JavaScript player in Facebook. Is it possible?
I have tried with
<meta property="og:video" content="https://***/player.html">
<meta property="og:video:type" content="text/html">
<meta property="og:video:secure_url" content="https://***/player.html">
<meta property="og:video:width" content="500">
<meta property="og:video:height" content="500">
What I want to do is a system like the Twitter player cards. I wish to have my player embed in Facebook in an iframe (like Twitter). This way I can have a custom skin for my player and control it the way I want.
The code above is working if I link an MP3 file in secure_url & video but not when I link the player (example of link: https://***/player.html)
When shared on Facebook I have my link in a "video" element with the source set to my link.
well, youtube and soundcloud use html players for sharing. "https://www.youtube.com/embed/xPR-Ej-ENbk". So it should be possible, I am working on the same issue here, but when rendered on facebook am getting a div with class name "me-cannotplay", and am still trying to figure out if this something related to getting white listed by facebook or if there is something wrong with the html player i am using.
As #WizKid said, a simple answer is that you just cannot embed any javascript in facebook story.
I am trying to create thumbnail images for several HTML pages, so the user can have an idea of what the HTML looks like before they open the link. I have searched online but haven't found anything useful.
Could anyone here provide some tips? Thanks so much!
I specifically want this to happen on the server side so the client is not required to load the page
You might want to check out this url: http://html2canvas.hertzen.com/.
Using this script, you can convert the page into a canvas on the client side.
Then you can use that as your thumbnail.
You have to use Open Graph tags in you header tag:
<html>
<head>
<meta property="og:site_name" content="Your Website Name Here" />
<meta
property="og:title"
content="Yourtitle goes here, about 90 characters in length."
/>
<meta
property="og:description"
content="description of URL that is about 300 characters in length."
/>
<meta property="og:image" content="YOURIMAGEURL.JPG" />
<meta property="og:type" content="blog" />
<meta property="og:url" content="http://yourURL.com/" />
</head>
<body></body>
</html>
http://api.s-shot.ru/?=(your url)
and
https://s.wordpress.com/mshots/v1/(your url)
I hope those Help!
http://phantomJs.org offers a free tool to capture HTML locally from a file (if you enable that via a command line parameter and use the file:// URI scheme) or from a website and render it to an image. That is a very well-established very popular tool It's also used by people who write automated tests. There's a wiki page that covers that tool, and similar ones.
It has a cropping option. You could run the output of that through other image manipulation tools to scale it.
As far as getting intelligent previews/thumbnails like Twitter and Facebook do, that I'm not sure of. I know there is an oEmbed protocol that is popular that Twitter and other sites provide, and ways to extract the metadata whereby you could possibly construct your own small HTML file and then render it to an image.
(Note about phantomJs: If you don't get the image quality you want in the rendered image, try raising the quality setting for the image parameter to 100, as well as increasing the page's zoom factor option. I've found zoom factor of 2 produces profoundly better quality than zoom factor 1 - see the API docs regarding zoom).
I couldn't get phantomjs to work for my site for some reason, and in further searching I stumbled on this technique for using an iframe to simulate a thumbnail. Posting this here in case others find it useful.