How can I detect video duration inside the iframe via jQuery/Javascript - javascript

Hello I'm trying to do an chrome extension,
my main purpose is detect videos on the page, and check if user watch 80% of video, some sites using iframe for videos openload, king, vk, mail.ru etc.
The main question is, am I supposed to write a specific function for every source or can I detect videos with simple tricks?
Many of sources using sort of hashing or whatever for security reasons, I can't find an specific dom element with jquery.
example site html:
<iframe id="episode_player" src="http://hqq.tv/player/embed_player.php?vid=264230257263260272277221239235213255194271217261258&autoplay=no" scrolling="no" frameborder="0" width="100%" height="495" allowfullscreen="true" webkitallowfullscreen="true" mozallowfullscreen="true"></iframe>
my plugin:
var iframeR = $("iframe#episode_player").contents().find("video").get(0);
console.log(iframeR);
returns undefined.
for sources who use object tag, I tried this
var zazi = $("iframe#episode_player").contents().find("object").length;
console.log(zazi);
it returns 0
any idea, which can help me to find a way?
thanks.

If I understand this correctly, you can simply use Javascript for this:
W3Schools rocks
If not, correct me!

Related

Activate Autoplay based on allow="autoplay" attribute in iframe - Google Autoplay Policy

I really tried to find an answer but couldn't.
Google have changed their Autoplay Policy .
I am loading an iframe with Src to independent code, like this:
<iframe frameBorder="0" scrolling="no" allow="autoplay"
src="myurl"
width="640" height="480">
</iframe>
myurl is a path the a video player.
I want to check if 'allow="autoplay"' was passed as iframe attribute where the player code is, and the decide if to set auto play or not.
Note, that the site where the iframe is loaded is a different site' with different code and it even sites on a different server then the myurl site.
How can I do it?
It can not been done.
You need to use a promises to check if the auto play succeeded.
I used googles way of doing it.
Hope it will saves some time to someone :)

auto-detect and auto-embed youtube videos. PHP or Javascript?

I run a 4chan style imageboard. When users post youtube or soundcloud links, I would like for the board to give a second link which, when clicked, would embed the video.
If I am not mistaken, 4chan uses JS to accomplish this. I have also seen many forum admins using php to do this. I know that wordpress uses php to do this.
If I went with php, I was thinking of going with something based on this:
https://www.warpconduit.net/2013/04/13/automatically-embedding-video-using-only-the-url-with-the-help-of-oembed/
For JS I am not entirely sure how to go about it. I would probably use a regex to detect youtube urls and then convert that information to an embed
You don't need RegEx, PHP or oEmbed to do this. Both sites allow iFrame embeds. So when a user gives a link just add the iframe embedding part yourself (around their link) and output that as part of the user's post.
Use String functions like indexOf to see if the link contains the word "soundcloud" or "youtube" then adjust user's given link to correct format for the iframe embedding.
Some examples:
Youtube : format = youtube.com/embed/ + User Link
User puts https://www.youtube.com/watch?v=KKE0Py64jmk so your code makes it as...
<iframe width="500" height="300"
src="https://www.youtube.com/embed/KKE0Py64jmk">
</iframe>
SoundCloud : format = w.soundcloud.com/player/?url= + User Link
User puts https://soundcloud.com/thenextmen/sofa-feat-pupajim then your code changes it to...
<iframe width="500" height="300"
src="https://w.soundcloud.com/player/?url=https://soundcloud.com/thenextmen/sofa-feat-pupajim">
</iframe>

Why does ExpressionEngine seem to remove the src URL from an iframe client-side?

ExpressionEngine seems to be stripping some of the parameters from the source URL of an iframe. This is happening in the browser, not on the server.
When I view the HTML source for the page in question, the iframe source is correct. When I view it in the console, it is not the same as in the HTML source.
The elements console shows:
<iframe frameborder="0" height="166" scrolling="no" src="http://w.soundcloud.com/player/?wmode=transparent" width="100%"></iframe>
The HTML source shows:
<iframe frameborder="0" height="166" scrolling="no" src="http://w.soundcloud.com/player/?url=http%3A//api.soundcloud.com/tracks/112438993&color=ff6600&auto_play=false&show_artwork=true" width="100%"></iframe></div>
If I manually change the source in the browser's elements console, the iframe loads without problem.
I'm imagining there is some javascript that is stripping out the src, but I can't find it. I've searched and searched using Google for someone experiencing the same problem, without success.
The URL in question is: http://rebelnoise.com/articles/album-debut-in-december-for-irish-garage-popsters-dott
This happens for all soundcloud and spotify links.
Spotify Example: http://rebelnoise.com/articles/black-flags-what-the-the-bands-first-album-of-new-material-since-1985
Thanks!
EDIT:
On a hunch, I tried changing the source URL from https:// to just // --- still no luck.
I noticed that the wmode=transparent query string exists in the console, and not in the source... I wondered if a Javascript function was overwriting with the transparent query string, so tried adding that to my full URL as follows:
<iframe frameborder="0" height="166" scrolling="no" src="//w.soundcloud.com/player/?wmode=transparent&url=//api.soundcloud.com/tracks/112438993&color=ff6600&auto_play=false&show_artwork=true" width="100%"></iframe>
Interesting: I tried saving the entire page and resources to my Desktop, and running it that way-- everything seems to work, so I'm very perplexed.
I am closer to finding the problem-- it appears that wmode=transparent is being added to src all throughout the DOM, so I am wondering if some dummy added bad javascript code in the past to break this site and cause all this problem. Now to find the culprit code!
OK, I feel like a dunce- should have found the pattern sooner.
There was some code in the footer that added wmode=transparent to all the src files-- it didn't append to any queries that existed, it just replaced them with a new query string.
I removed that code, and everything is now working.

Any idea how to disable auto play on embedded "Vine.co" videos?

I'm working on a little side project.
I'm able to embed and display specified vine.co video's with
<iframe id='eFrame' src='http://vine.co/v/bJjdTLBnwx1/card' width='380' height='380' frameborder='0'></iframe>
I'm pulling in the links via Ajax to display them on the page, however now the problem is they are all autoplaying, which causes major browser lag.
Anyone know how I can append them to the body with autoplay disabled? This project is all client side, so I'll be limited to client-side languages. (ie Javascript/jQuery etc..)
Much appreciated, Cheers.
I'm probably late but you can pass some command via the postMessage javascript's function. It worked for me :
var iframe = document.getElementById(id);
iframe.contentWindow.postMessage('pause', '*');
Same construction for play, mute and unmute.
<iframe id='eFrame' src='http://vine.co/v/bJjdTLBnwx1/embed/simple' width='320' height='320' frameborder='0'></iframe>
Try this it will be of much help have better controls and only on pressing the play button it will run.
Try it.

How do I make an audio file and flash player embeddable?

I've got a flash player (using JWPlayer) that plays an audio file. The file plays fine.
How do I provide the embed code for end-users to copy, so they can post the player and play the audio file on their own site directly? Should I be using HTML <pre> tags somewhere? Or JavaScript to generate the embed code / link?
For example. SoundCloud has:
<object height="81" width="100%"> <param name="movie" value="https://player.soundcloud.com/player.swf?url=http%3A%2F%2Fapi.soundcloud.com%2Ftracks%2F31988157&show_comments=true&auto_play=false"></param> <param name="allowscriptaccess" value="always"></param> <embed allowscriptaccess="always" height="81" src="https://player.soundcloud.com/player.swf?url=http%3A%2F%2Fapi.soundcloud.com%2Ftracks%2F31988157&show_comments=true&auto_play=false" type="application/x-shockwave-flash" width="100%"></embed> </object> <span>The Fray by chris_ilett</span>
And YouTube has:
<iframe width="420" height="315" src="http://www.youtube.com/embed/FL7yD-0pqZg" frameborder="0" allowfullscreen></iframe>
What are the benefits of having an <object> and an <iframe>?
Lastly, on the main site. Any time an end-users visits the audio page. The web app increases the views_count. If I am using <object> or <iframe>. Will I still be able to track the number of views somehow?
iframe vs object
The main reason for YouTube's use of <iframe> (i.e. "the benefit") is that it allows them to change how the video is actually displayed - without the website that's embedding the video having to change its <object> element. I.e.:
YouTube can serve different content depending on the browser - i.e., if the browser doesn't have FlashPlayer installed, they could output an HTML 5 <video> element in the <iframe> instead. In the future, you might want to do the same (with an <audio> element), so <iframe> might be a good choice for flexibility in the long term.
It's easier for YouTube to change how the content is output in case of bugs etc. In other words, if for some reason (to mak FlashPlayer 12 behave, for example) they need to add or change a <param> in the HTML or something else, they can do that without every person embedding their videos having to change it themselves.
The code
You would probably use Ruby to output the actual code, although you could use Javascript too - it would need to be generated somehow in order to reflect the exact audio that's supposed to be played. As for putting it in <pre> tags, it's not a technical necessity - just a matter of a better user experience - simply because it's easier to tell where the code starts and ends.
Which tags to use exactly is just a matter of philosophy. Some would say "use a <code> element (to indicate it's code) and style it to display as a block element"; others would say "just us a <pre> element since it's already a block element"; and some would say "Combine the two: <pre><code>...</code></pre>".
Tracking
You can track either. The requests for the audio will always be sent to your server, so it's possible to use tracking in either case. The case of <iframe> is easier to track in the same way you're already doing it, though - since the src of that iframe will just be a link to a simpler version of your audio page (only showing the actual player), you can increase views_count in exactly the same way as in the audio page.
As for <object> advantages
Why does SoundCloud use <object> exclusively? Just guessing here...
Either they just haven't gotten to it yet, or they've decided (quite rightly in some regards) that a completely predictable, working <audio> element is a bit into the future, and not worth it just yet.
Or they have that philosophical dislike of the <iframe> element that some developers have (me included in some ways - I only use it if absolutely no other alternative makes sense).
The user (i.e., the one who's embedding the sound) may also intend to use it in a place where <iframe> would cause troubles, isn't directly supported (e.g. some CMS's) etc.
Also, although I doubt it's their reason, it means one more hit to their server - letting users embed <object> will retrieve the flash content directly. If they use <iframe>, SoundCloud will be hit by an additional request per embed - one for the HTML and one for the audio file (and, for FlashPlayer, one for the swf file).

Categories