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.
Related
I want to play video from google drive in exoplayer. I copied the shareable link. But this link leads to google drive video player page. I have checked shareable link response, it contains link for video thumb image and also the video link. But this video link is calling any code further to play the video. I want to get or more specifically extract the true video playable link from the response. Here is the code portion from the response which contains important links,
<meta name="referrer" content="origin">
<title>KOB-S3-E1.mp4 - Google Drive</title>
<meta property="og:title" content="KOB-S3-E1.mp4">
<meta property="og:type" content="video.other">
<meta property="og:site_name" content="Google Drive">
<meta property="og:url" content="https://drive.google.com/file/d/1eqNQOwDzDDjHizpUz-sB86VK4LisqGu1/view?usp=sharing&usp=embed_facebook">
<meta property="og:image" content="https://lh4.googleusercontent.com/eqNekxifrzidbBB-SzJbdJJ1xcOY6NFgR_0wIXHAnX-uHLO3FfUmgt-AokDallwbAXI=w1200-h630-p">
<meta property="og:image:width" content="1200">
<meta property="og:image:height" content="630">
<meta property="og:video" content="https://video.google.com/get_player?docid=1eqNQOwDzDDjHizpUz-sB86VK4LisqGu1&ps=docs&partnerid=30&cc_load_policy=1">
<meta property="og:video:type" content="application/x-shockwave-flash">
The image thumb link is working, but the I can't find the link which I can use to play video in exo player android app.
This is the original shareable link:
https://drive.google.com/file/d/1eqNQOwDzDDjHizpUz-sB86VK4LisqGu1/view?usp=sharing
Google Drive video's are not designed to be streamed directly as you want - it can be done, see below, but you need to be aware that, as this is not the intended use, you could find it stops working overnight if Google Drive update the way they have architected or deployed their solution.
With the above caveat in mind, there are approaches that will allow you extract the original video URL - see this answer for a good example which outlines a number of approaches: https://stackoverflow.com/a/52397246/334402
One thing to be aware of - your original hosted video is actually being delivered using ABR streaming protocols, which means the video is copied into different resolutions/bitrates on the server side and each copy broken into chunks. The player can decide which resolution to download for the next chunk based on the current network conditions and player capabilities. See, for example, the 'quality' options for your video by looking at the settings:
Depending on the approach you use you may need to be aware of the particular URL for the specific resolution you want.
If you simply want to play the video back in an app and it does not need to be via ExoPlayer you may find it much easier to simply use the standard embed code within a Webview in your app.
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
<!doctype html>
<html lang="en">
<head>
</head>
<body>
<iframe src="https://www.google.com/?gfe_rd=cr&ei=4xVYV-iRE4SEoAPS2YHgAQ"></iframe>
<iframe src="https://www.example.com/"></iframe>
</body>
</html>
In the above code example.com site plays some sound I want to mute that sound. I want to mute the sound only for that site/iframe
Thanks in advance.
To my understanding, browsers don't allow you to interact with the with the DOM of the iframe embedded elements. It's possible that your whole page could be muted, and I'll try to fiddle up that solution, however, since that's not what you need, I guess you're just out of luck. #keziah suggested putting video URL in <video> tags and I am not aware of a better course of action.
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'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.