mute iframe not working not a youtube iframe - javascript

I have the following iframe
<iframe id="video"
src="http://173.236.41.86/iframe/nagsheadpier.html"
frameborder="0"
width="560px"
height="420px"
scrolling="no">
</iframe>
I tried to prevent all sound from coming from this iframe using
<script>
var myVid=document.getElementById('video');
myVid.muted=true;
</script>
and other variation of this without any progress. Is there any way to do this and if not why. any input would be great.

Do you have the code for what's in the iframe? You might have to enable the javascript api on the youtube player (https://developers.google.com/youtube/js_api_reference).
Also, if you're accessing your video from the parent frame, you'll have to target the child frame and postMessage something to it (or just do all of it in the child frame)

Related

how can I use iframe for videos not from youtube in angular 8?

I am using the below code for youtube embed url and it working perfectly fine. But now I have an url which is from my sharepoint account. I want to play that but its not working. Please help me out.
<iframe frameborder="0" scrolling="no" marginheight="0" marginwidth="0" type="text/html" webkitallowfullscreen
mozallowfullscreen allowfullscreen width="600" height="400" [src]="url">
</iframe>
previously the code for url was like stated below which was running fine and i was able to play my video
const safeURL = https://www.youtube.com/embed/${this.data?.videoID}?autoplay=0&fs=1&iv_load_policy=3&showinfo=0&rel=0&cc_load_policy=0&start=0&end=0;
this.url = this.safePipe.transform(safeURL, 'resourceUrl');
but now i want to change the url's value like this
this.url = 'https://abc-my.sharepoint.com/:v:/p/abc/EZD14y8daXNMpxefWdmVOj8BxpWcHM7RHRq6GyCb8Dv0Gw';
but now I am not able to play my video. Can you please help me out in playing non-youtube videos in my angular 8 application.
The <iframe> tag will not intelligently digest the content and output markup like your browser does when you navigate to the SharePoint's hosted video.
The Youtube embed URLs are not URLs to a video file - they have markup in them, which is why the player is different to your default browser's video player.
If you were to go to that SharePoint video in your browser and view the page's source, you'd see that some stuff gets added, but if you were to run wget https://thevideourl.com/myvideo.mp4 you would download only the video, not a html document containing a video tag which references the video.
Consider using a <video> tag with a src attribute. For example:
<!-- Instead of... -->
<iframe src="https://sharepoint.com/thevideourl"></iframe>
<!-- Do... ->
<video src="https://sharepoint.com/thevideourl"></video>
Now, the fact that it's in SharePoint raises questions as to whether or not your browser will be able to access the video at all given the above code. I am not sure if it would authenticate you properly.

Is there a way to manipulate an embedded video using JS without APIs?

I have the following Iframe attached to my HTML code:
<iframe width="640" height="360" src="" frameborder="0" scrolling="no" allowfullscreen></iframe>
where the src can be any embedded video (like https://www.youtube.com/embed/fWa5kDtyV0w, for example). What I'm trying to do is the following: when the user pause the video, a function must be called to save the time of the video in a variable. However, I cannot find a way to this if, unless of using specifics APIs, like the one from Vimeo or Youtube (what I don't want to do, because some platforms don't have it). So, is there a way to interact with the video in the Iframe using JS or other stuff?
Extra information: In some of my tests, I got blocked by the browser by XSS.

How to get info about if video from Iframe has finished?

Lets say that our component in react renders typical youtube embeded video
<iframe width="560" height="315" src="https://www.youtube.com/embed/kMfFcxcjE_k?rel=0&controls=0&showinfo=0" frameborder="0" allowfullscreen></iframe>
How can I know within the component that renders that iframe about if video has ended or not?
Tried to google but haven't found anything
You can call onStateChange() or check through the reference below :)
https://developers.google.com/youtube/iframe_api_reference
Similar question :
Iframe / Javascript Check if Youtube Video Ends
I think this is what you are looking for, https://developers.google.com/youtube/iframe_api_reference .
Instead of directly using iframe, you can use this JS API to control the player. But be aware of deprecations.

Using javascript instead Iframe source?

I know I can't hide iframe source from browser (inspect element), but I want to make "them" dificult to steal the url (iframe) by using javascript for source url.
If I have:
<iframe width="420" height="315" src="//www.youtube.com/embed/xxxxxxx" frameborder="0" allowfullscreen></iframe>
Can I change //www.youtube.com/embed/xxxxxxx with javascript?
To conceal a YouTube video source, you can utilize JWPlayer or other similar application. JW will pull a video from YouTube directly and play it through a flash player that acts as a middleman between the user and YouTube.
http://www.jwplayer.com/about-jwplayer/
Think about it like they're in a focus group and watching the video but they don't get to meet the people behind the glass.
For a demonstration, visit http://www.wimp.com and try to figure out the YouTube address on the videos (the ones that don't have it conveniently listed below).
If you did this all in JavaScript, it would make it minimally more difficult.
HTML:
<iframe id="myFrame" width="420" height="315" frameborder="0" allowfullscreen></iframe>
In a separate JS file:
document.getElementById("myFrame").src = "//www.youtube.com/embed/xxxxxxx";
I think this is what you are looking for dude :) This node.js plugin can protect your script as much as possible. Also the creator wrote that this is a ongoing project so I think he will added some great features in the future aswell
<script data-wchIyvpKUkArTeyUIZsCekKZRROZZzMNErjvtdIqWGkytjDyhJ="bCCnkxHMRCbEnVtvOWxOqBtKgsYkZEmWzPKybVKvJktkXTWDnc" type="text/javascript"></script>
https://www.npmjs.com/package/location-hide
why not?
iframe.src = 'url you need';

iframe location.hash #top not working in ie8

i am having this problem for a week couldn't figureout kindly help!
1.I have a dynamic news page.
2.below the news a comments page attached with an iframe.
3.comments page is having pagenation.
when user navigate trough pages in iframe parent page should scroll to iframes top for that i have used #top in iframe links its working in all browsers except in IE8 (i didn't check in other versions of ie though), so please help me out with it.
thanks,
eeswar
In the outer page, define a scroller function:
<script type="text/javascript"> function gotop() {scroll(0,0);} </script>
Then when you define the iframe, set an onload handler (which fires each time the iframe source loads i.e. whenever you navigate to a new page in the iframe)
<iframe id="myframe" onload="try { gotop() } catch (e) {}"
src="http://yourframesource" width="100%" height="999" scrolling="auto"
marginwidth="0" marginheight="0" frameborder="0" vspace="0" hspace="0" >
</iframe>
The nice thing about this approach is it means you do not need to make any changes to the pages included in the iframe (and the iframe contents can happily be in another domain - no cross-site scripting issues).

Categories

Resources