I would like to integrate mp3 sound file into web-page using Flash, just to play it if some event occurs. It seems to me, the easiest way to do that is to integrate a small swf file into web-page and send path to mp3 file as parameter in element. So basically swf gets path to mp3 file and plays it.
Is it possible to make flash element (swf file) without a picture or without scene? It looks like, flash element always need to have a visible screen, but I don't need it because my flash component doesn't need to show anything to a user.
UPDATE:
At this moment, I made 1x1px flash and hid it in HTML document, using object element.
<object width="0" height="0">
You could try hiding it with css or jquery? or maybe make the BG colour of the swf the same as your webpage.
Can you just make it float and transparent?
<object style="position: absolute; top: -1px; left: -1px;" width="1" height="1">
<param name="wmode" value="transparent">
<embed src="thing.swf" wmode="transparent" width="1" height="1" />
</object>
Related
I can't seem to figure out why I am having issues with an embedded PDF in a simple HTML page on ONLY iOS devices (iPad/iPhone). Android and PC are fine. On iOS devices it renders the PDF on the page as what appears to be a PNG file. It only renders the first page of the PDF. Scrolling doesn't work, neither does tap and hold. The browser doesn't see it as a PDF. I've tried:
<object data='edoc.pdf'
type='application/pdf'
width='100%'
height='700px'>
</object>
Even tried an iFrame/DIV and while I can get the frame to scroll, it's only when I shrink the frame smaller than the "pdf" is renderd and it simply scrolls the single image around.
<style type="text/css">
.scroll-wrapper {
display: inline-block;
-webkit-overflow-scrolling: touch;
overflow-y: scroll;
}
.scroll-wrapper, .scroll-wrapper {
width: 400px;
height: 400px;
}
</style>
<div class="scroll-wrapper">
<iframe src="edoc.pdf" id="test" ></iframe>
</div>
I'm at a loss. My application needs to use an embedded PDF but I need to figure out why the iOS devices are such a hassle. This behavior has been repeated on Safari, Chrome, Firefox. On iPhone and iPad. Version has been consistently iOS 10+. I've checked the web server mime type is setup properly for PDF. I've tried multiple PDF's from multiple locations.
Linking to the PDF
<a href='edoc.pdf'>PDF Name</a>
Works just fine. I'm lost. Help.
Any help is welcome.
I've been given a design to implement which has a lightbox which has some content inside which includes links. This is all fine and working except for when it comes to iOS where it's not possible to interact with the content of a lightbox if its position happens to be on top of a video.
It's acting as though the video is on top of the lightbox content - even though it's behind. The issue occurs even with extremely simple barebones HTML.
Stripped back HTML:
<video id="home_video" controls preload="none" poster="http://www.videojs.com/img/poster.jpg" width="500">
<!-- video sources -->
</video>
<!-- positioned over the video -->
<div id="lightbox">
Not touchable on iOS
Touchable because it's not over a video
</div>
Associated stripped back styling:
#lightbox {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: rgba(255,255,255,0.5);
}
#lightbox > a {
display: inline-block;
background: red;
padding: 20px;
}
#touchable {
margin-top: 400px; /* taller than video */
}
I've put together a jsfiddle example. It includes some JS which alerts when you've successfully clicked/touched a link. On desktop browsers it's possible to click both links, on iOS it's only possible to click the second.
It might be worth noting that the issue occurs whether the lightbox is pre-opened on page, or after being explicitly opened as in this jsfiddle
I can think of a number of ways of hacking around the problem - such as moving the video off screen, replacing it with its poster image, or by transforming the video using translateX to hide it, but I'd prefer to leave the video where it is, if possible.
Has anyone stumbled across this issue before and found a solution? Any pointers?
This is a quirk of Mobile Safari, where it intercepts all touch/click events for elements on top of a video element, regardless of z-index or DOM order, only when the controls attribute is set.
So the solution is to remove the controls attribute and implement your own custom controls wit Javascript. You can use existing open source players to provide these controls for you (e.g. jPlayer, videojs, etc.), but you need to be careful because some of them have a special case for iOS where they will just use the native player controls. I think this is because it's simpler than making those mouse-centric controls work with the quirks of iOS (like touch and lack of volume control). So you need to check the documentation to see if there's a flag to force the player to use its own controls rather than the built-in ones.
I'm building a website with a HTML5 video embedded on the homepage. The video displays fine on desktop browsers. It is coded to be 100% of the width of the container in which it sits and the site is responsive (bootstrap). My issue is that on iPad, the dimensions are defaulting to small size (150px height, don't recall the width and it looks ridiculous. I have tried to define a size within the HTML, this hasn't worked.
<video width="1024" height="768" poster="images/video-placer.png" controls autoplay >
<source src="video/video.mp4" type="video/mp4">
<source src="video/video.webm" type="video/webm"></video>
The CSS for the video tag is width:100%; height:auto;
Am I missing something obvious here?
I've had this issue in the past with some YouTube embeds. I solved it by adding this CSS class to my main stylesheet:
html, body { height:100%; }
Hope it helps you out.
I'd like to display embedded YouTube videos with the controls hidden by default, and when the user clicks on the video, controls appear. Just as the videos on this page.
In Google documentation pages I found how to hide controls altogether, but not in this way. And using Firebug while visiting this page I can't see any options used in the iframe code that relates to controls.
So how to do that?
for some reason the embed code isn't allowing you to hide player controls anymore (it was working yesterday). The way I used to make it work again is to use the old embed code with the parameters to hide the controls when you click the video they show up but if you roll out they hide again here's the code:
<object width="560" height="310">
<param name="movie" value="https://www.youtube.com/v/_-7K-z5zzOs?version=3&rel=0&autohide=1&iv_load_policy=3&modestbranding=1&showinfo=0"></param>
<param name="allowScriptAccess" value="always"></param>
<embed src="https://www.youtube.com/v/_-7K-z5zzOs?version=3&rel=0&autohide=1&iv_load_policy=3&modestbranding=1&showinfo=0" type="application/x-shockwave-flash" allowscriptaccess="always" width="560" height="310"></embed>
</object>
UPDATE
its back working fine here's the code:
<iframe width="560" height="240" src="//www.youtube.com/embed/_-7K-z5zzOs?autohide=1&iv_load_policy=3&modestbranding=1&rel=0&showinfo=0" frameborder="0"></iframe>
The "autohide" parameter worked for me:
<iframe src="https://www.youtube.com/embed/C4wPA6EKTJw?autohide=1" width="800" height="460" frameborder="0" webkitAllowFullScreen mozallowfullscreen allowFullScreen></iframe>
So the question is:
Can i load load embed youtube video in fullscreen mode, by button click, skip intermediate UIWebView?
Googling gave me only one answer - probably NO, but hope still alive.
Have you tried embedding the video as a fullscreen page?
Something like:
<object style="height: 768px; width: 1024px">
<param name="movie" value="http://www.youtube.com/v/gPLb9FVKoqI?version=3&feature=player_detailpage">
<param name="allowFullScreen" value="true">
<param name="allowScriptAccess" value="always">
<embed src="http://www.youtube.com/v/gPLb9FVKoqI?version=3&feature=player_detailpage" type="application/x-shockwave-flash" allowfullscreen="true" allowScriptAccess="always" width="1024" height="768">
...and then present it in a fullscreen UIWebView?
This is assuming you somehow generate yourself the embedded pages (which shouldn't be difficult if you know the video id)
Other than that, I don't see what other options you might have.