I am working on a gallery page with quite a few external HTML pages embedded using iframe, however, some of these external pages have audio embedded into them which I would like to mute.
Here is a sample code for the HTML files
gallery.html
<div id="pages">
<iframe id="embed" src="https://xyz.com/page1.html"></iframe>
<iframe id="embed" src="https://sdf.com/page2.html"></iframe>
</div>
page1.html
<html>
<head>
<!-- head stuff-->
</head>
<body>
<audio autoplay>
<source src="http://audio.url/somefile.ogg" type="audio/ogg">
<source src="http://audio.url/somefile.mp3" type="audio/mpeg">
Your browser does not support the audio tag.
</audio>
<!--some more body content>
<body>
</html>
Also, since I'm dealing with multiple external pages, the audio tags mostly might not have ids attached to them. This makes document.getElementById() a non-reliable option. I've experimented with document.getElementsByTagName("input") but couldn't quite get the audio muted. Can anyone please help me with this?
Since these pages are being served up from different domains you will not be able to access the HTML within the iframe due to same origin policy.
Related
I am trying to build an embeddeable video frame to display video content on other pages. the video itself is being served from a certain location, and it plays fine with using <iframe></iframe> however I want this specific build of the video to be able to target a different src which is why i wanted to build it up with the video html tag instead of an iframe
<video width="320" height="240" controls autoPlay>
<source src="https://embed.truthcasting.com/video/100003694/208448" type="video/mp4"/>
Your browser does not support the video tag.
</video>
the problem is the CORB error, however if i serve up the same content from an iframe
<iframe
style={{ height: "25rem", width: "100%" }}
scrolling="no"
src="https://embed.truthcasting.com/video/100003694/208448"
webkitallowfullscreen="true"
mozallowfullscreen="true"
allow="autoplay; fullscreen;encrypted-media;"></iframe>
the content will come through, no CORB error. Now normally I wouldnt mind and i would just use the iframe to display content, however i was hoping since with <video> you can designate multiple sources.
but no matter ive tried I cant seem to get around the CORB.. is this a server issue similar to CORS? do i need to add something somewhere in the server so it can display in this manner?
the video html tag requires an actual video, the src url that was supplied to the HTML tag, is that to an external site, that plays a video, but isnt an actual video itself. the reason that it works on an <iframe> is because the iframe will display a webpage, <video> will not.
Ive tried this in my code and cant seem to make it work.
<body>
<div id='container'>
<canvas id='game' width='320' height='480'></canvas>
</div>
<p>HTML background music test</p>
<embed src="music/alien-spaceship_daniel_simion.mp3" autostart="true">
<script src='Scripts/engine.js'></script>
<script src='Scripts/game.js'></script>
</body>
These sorts of embeds are discouraged these days, as they are not supported on all systems. Additionally, each plugin often had its own distinct API. You should use an <audio> tag instead.
<audio src="music/alien-spaceship_daniel_simion.mp3" controls autoplay />
Note however that autoplay doesn't typically work anymore, thanks to excessive abuse of the feature, and subsequent browser policies.
while using laravel 5 and google chrome to return the view that include a video tag
I can't get to allow video seeking I found that it could relate to not
accepting range in laravel but being quite noob I don't know what to do??
<!-- the view -->
<!DOCTYPE html>
<html>
<head>
<title></title>
</head>
<body>
<div id="app">
<video id="xx" class="video-js vjs-big-play-centered"
data-setup={} height="300px" width="300px"
preload="none" controls>
<source src="{{asset('videos/property.mp4#t=120')}}"
type="video/mp4" media="" >
</video>
</div>
</body>
</html>
It looks like you're using VideoJS as a video player. This is where you'll be able to handle scrubbing and jumping to a timestamp within the video. I'd check their documentation for the best way to handle that, and look at your Google Chrome dev tools console to see if there are any JavaScript errors.
There isn't currently a non-JavaScript way to start a video at a specified point, so I don't believe Laravel is the culprit here.
I've been trying to get a videos source from a website and play it in my own application. When I run, it just end up on the front page of that website.
example:
<!DOCTYPE html>
<html>
<body>
<a id="play-video" href="#">Play Video</a><br />
<iframe id="video" width="420" height="315" src="http://vkpass.com/token/bdrxwnlzfjpq/vklhash/Pw7Iy8MztzzwN6xh7nOhf6o80rxCAYIhP8xiQFZ2fGX2.a1aa2ZoFDfJvKt0cycHuydloxHztEjWaRXccGVjbw==?source=v1#" frameborder="0" allowfullscreen></iframe>
</body>
</html>
Am I doing something wrong or is there a way around this?
Delete href="#" from <a> tag.
The website has some sort of anti-embedding script that won't allow you to play the video.
But the answer to stop the redirecting would be to use the sandbox attribute that HTML5 has for iframe objects.
<iframe id="video" width="420" height="315" src="http://vkpass.com/token/bdrxwnlzfjpq/vklhash/Pw7Iy8MztzzwN6xh7nOhf6o80rxCAYIhP8xiQFZ2fGX2.a1aa2ZoFDfJvKt0cycHuydloxHztEjWaRXccGVjbw==?source=v1#" sandbox="" frameborder="0" allowfullscreen></iframe>
https://developer.mozilla.org/en-US/docs/Web/HTML/Element/iframe
If specified as an empty string, this attribute enables extra
restrictions on the content that can appear in the inline frame. The
value of the attribute can either be an empty string (all the
restrictions are applied), or a space-separated list of tokens that
lift particular restrictions. Valid tokens are:
And one of the options is
allow-top-navigation
[Which] allows the embedded browsing context to navigate (load)
content to the top-level browsing context. If this keyword is not
used, this operation is not allowed.
By excluding this option in the sandbox attribute, it DOES NOT allow redirecting/top-level navigation.
Use video tag instead and remove the anchor tag for play video. Also there is something wrong with the src link of iframe tag, its returning a redirect response instead of video. You can check that by changing the src to the code here and when you download that you will get an HTML page.
<!DOCTYPE html>
<html>
<body>
<video autoplay="true" width="320" height="240" controls loop="true" preload="auto" src="https://s3.ap-south-1.amazonaws.com/habba-cdn/assets/Video/Home-page.mp4"> </video>
</body>
</html>
I'm tried your code in my local and it stops redirecting when i'm including the property sandbox="" as #X33 mentioned and in the console it is showing an error like
Blocked script execution in 'http://' because the document's frame is sandboxed and the 'allow-scripts' permission is not set.
This link may help you
stackoverflow Question
I've been working on a musician's site with html5 audio playback. Everything works fine in Firefox and Chrome, but IE has been giving me issues, and I narrowed it down to the way I'm loading the media.
Part of my strategy to obfuscate the media source is to have an audio tag with no source, then add the source via javascript.
If I manually write the html, IE10 honors the preload="none" attribute, but if I don't include the sources and add them to the DOM via javascript, the preload attribute is ignored.
Example 1 works as intended:
<!DOCTYPE html>
<html>
<head>
<title>HTML5 audio test</title>
</head>
<body>
<p>
This is an audio tag with two source tag children of different types. Preload is set to none.
</p>
<audio id="audiotest" preload="none" controls>
<source src="test.ogg" type="audio/ogg">
<source src="test.mp3" type="audio/mpeg">
</audio>
</body>
</html>
Example 2 loads starts to download the media despite the preload attribute:
<!DOCTYPE html>
<html>
<head>
<title>HTML5 audio test</title>
</head>
<body>
<p>
This is just an audio tag with preload none with javascript adding the sources.
</p>
<audio id="audiotest" preload="none" controls>
</audio>
<script>
var oggSource = document.createElement('source');
oggSource.type='audio/ogg';
oggSource.src='test.ogg';
var mp3Source = document.createElement('source');
mp3Source.type='audio/mpeg';
mp3Source.src='test.mp3';
document.getElementById("audiotest").appendChild(oggSource);
document.getElementById("audiotest").appendChild(mp3Source);
</script>
</body>
</html>
Here are the working examples:
http://www.joshblackburn.com/test1.php
http://www.joshblackburn.com/test2.php
I was trying to figure out why none of my controls were working in IE. I figured out that it was downloading every single track and locking things up. Using the dev panel in IE10, the network trace confirms the issue.
Is this an IE bug? Do I need to figure out different ways of obfuscating my sources?
The 'real' page is www.joshblackburn.com/new.php?page=albums if anyone is interested.