I am embedding a Vine using the standard embed code they provide, which loads an iframe with the video. Since it's a cross-domain iframe I'm unable to access it via Javascript and play/pause the video.
I have a slider of Vines and would like them to play only when on screen.
Is there any way to play/pause a Vine via JS? I've not found anything in their documentation.
Thanks.
I've found references to YouTube's JS API (https://developers.google.com/youtube/js_api_reference) in Vine's JS, but it can't be accessed by the normal means. From scouring the internet, it looks like people used to have luck just with using something like
document.getElementById('vine_iframe').contentWindow.postMessage('pause', '*');
but that doesn't work anymore. It looks as though they've closed the embedded player JS api.
Related
My objective is to create an audio visualizer that responds to the playback of a Youtube video. Unfortunately, YouTube uses an iframe, which seems to mean that accessing the media stream is impossible due to cross-origin requests (at least, I haven't been able to get it to work).
Is there a front-end solution? Is there any way to hook into the browser audio, or accomplish this in some other way without accessing the iframe's inner DOM elements?
What about using a library to download the video/audio and store it in local browser cache? Is it possible to sync with the embedded playback by getting a timestamp from Youtube's api and read a local copy for the audio processing? I've been trying all day to select the video element and create an audio context, but I don't know if there are any options to explore.
There is a similar question about 7 years ago: Is there anyway to visualize youtube audio from an iframe using the web audio api?
But the only solution required using something called "youtube-audio-stream" which is some kind of local app to stream youtube audio. At least, I haven't been able to get it to work with codepen, jsfiddle or codesandbox. I'd like it to be used alongside or transparently with the embedded youtube player and I'm not exactly sure if that is the direction I should be looking.
Maybe start with here:
Detect if audio is playing in browser Javascript
https://developer.mozilla.org/en-US/docs/Web/API/Web_Audio_API
I am not sure if that would be the solution to your requirement, but worth a try.
I have this news:
http://www.lanacion.com.ar/1923707-google-presento-su-guia-de-los-juegos-olimpicos-rio-2016
In the body, it has 2 videos embed with JW Player. It hasn't the video's url, only the video id. Is there any way to get the video url or embed the player?
If you see more slowly, in the page source there isn't any JS code related to the player either, even the url's JS library, only the CSS stylesheet..
I was trying to import JS library but i can't because i don't know the player ID..
In the docs, all the examples explain how to embed a video, but in my case i don't have the video url and it's just i looking for.
If you want to find the URL that is being played, watch the requests that are happening in the browser's Network monitor (part of developer tools). That will show you a URL.
It may not be much use though if the content is protected - they may do something like put a timestamp/IP hash on the URL or adopt some other scheme to avoid you linking directly to in.
In this case, for the first video, I was able to see the URL for the stream http://content.jwplatform.com/manifests/oYFEN0e0.m3u8, and link to it in HTML (only tested in Safari, which I know handles HLS files):
<video controls autoplay src="http://content.jwplatform.com/manifests/oYFEN0e0.m3u8"></video>
Working with API's tend to be quite confusing for me. That being said I found a bit of code at
HTML Auto Embedding Recent Uploaded videos from a youtube channel
I am unable to get it to work for myself, What should I be doing to make this work successfully? I currently have code in HTML file # https://foxumtv.com/videotest.html and as you can see it simply displays white page.
Thanks for any help I do apologize I am bit of newbie when it comes to webpage scripting.
You can check in the YouTube IFrame Player API on how to Embed a YouTube player. Here, you need to use the <iframe> tag to your application in which the src URL specifies the content that the player will load as well as any other player parameters you want to set. To specify the dimension of the player, you can use the height and width parameter here.
Here is the example for that.
For more information, just check the documentation link above.
NOTE: YouTube embeds were deprecated on January 27, 2015.
Please migrate your applications to use embeds, which can
intelligently use whichever embedded player – HTML () or Flash
() – the client supports.
I get the error "This video contains content from UMG. It is restricted from playback on certain sites." when trying to play certain embedded YouTube videos in Chrome extension.
I'm using YouTube IFrame API.
All the code is inside the popup.
I've tested my code on Localhost, and didn't got the error.
Example for YouTube Video with the restriction issue: YouTube Video.
I found a similar question Here, but didn't understand how to bypass the restriction issues.
#Workman suggested that YouTube IFrame implementation blocks certain referring urls from displaying licensed content and proposed a solution, but I need a dynamic solution.
I would really appreciate any help I can get.
PS. I wouldn't like to avoid videos that contains license content.
but didn't understand how to bypass the restriction issues.
you don't. The viewer may, if he uses a proxy or vpn and, sometimes, by changing the user agent.
Using some of the code I got here I was able to pull in comments on a regularly uploaded youtube video using JS and the Youtube API including title, author views and comments using the code found here:
Stackoverflow answer used
And my working example of a normally uploaded video:
Working Static Video
I have been trying to pull in a stream instead of a regularly uploaded video and the video itself is being pulled in great, but the rest of the info like the title and comments, which are the most important thing no longer show.
Example Using a Youtube Stream
I thought maybe it was because the stream was not live, but that doesn't seem to be the case since I can view the comments on a static page like any normal video its just positioned differently and I cant seem to find any info on the info having to be pulled in differently on a stream in the API.
Any help would be greatly appreciated.