Somehow the html video tag seems to be buggy in iOS 8 (UIWebView). There is no way to focus the "play" button on the video image. It always looks like that:
If we run the exact same code in iOS 7.1, it looks like that:
The HTML we load into the UIWebView looks like that:
<html>
<body>
<video style="width:100px;height:100px;" controls="" poster="http://goo.gl/Rz0Tkv">
<source src="/tmp/2f4194b4-cabd-4c34-9f34-78561b8a900f.mp4" type="video/mp4" />
</video>
</body>
</html>
We found no way to resize that play-button. Height/Width in CSS, direct HTML, even put the whole video-tag into a div and style this had no effect.
It's also interesting that in iOS 8, the poster-tag is necessary for a video, otherwise there is no thumbnail (in iOS 7, there was by default a thumbnail of the video).
Looks to me like a bug, do you have an idea for a quick workaround? Besides opening a ticket at apple ofc...
Update
It seems to be the same problem for the iframe tag.
Related
I'm trying to play a video in Jupyter books and I must be missing something.
This works...but it just auto-plays without controls and without the ability to stop it (unless one clicks and then it opens up with controls)...but it's not obvious to the user that this is a possible action:
{figure} ../_images/relativity/train_simultaneous.mp4
---
width: 60%
figclass: margin-caption
alt: My figure text
name: train_simultaneous
---
The very weird problem of the famous magnet and coil demo. Think hard about this.
If such functionality is not yet working (I think I saw that elsewhere), I don't understand why raw HTML would not work:
<video width="500" poster="../_images/relativity/train_cover.png" controls>
<source src="../_images/relativity/train_simultaneous.mp4" type="video/mp4">
</video>
</center>
That just sits there with a video start button. Clicking on it gives a frame, but for a zero second long video, so it's not loaded at all. I know this is a perfectly fine video source html as if I upload it to a server:
<video width="600" controls>
<source src="https://qstbb.pa.msu.edu/storage/QSBB_videos/relativity_temp/train_simultaneous.mp4" type="video/mp4">
</video>
</center>
...it works fine. The only difference is a local file versus a hosted file.
Ideas? I thought raw HTML would always be respected? (It is in bookdown and RStudio, which is what I'm converting from.) I've tried this with multiple acceptable video clips. All mp4.
I use videoJS to play a video on a HTML5 webpage. Everything is working well on PC (even with Safari), but on iPad (iOS 5), even if the video is playing well, I've got a problem with the size of the video – it is very small, and I don't know how to make it bigger.
I have tried adding width and height attributes and changing the default width and height in video.js.
Plus, my video is supposed to be 408px width and 520px height, and on iPad it's wider than high and there a black on each side.
How can I resolve this problem?
EDiT
#Emil thank you for your time. There is some codes :
How i include the video on my HTML page :
<video id='videoDavi' class='video-js vjs-default-skin' autoplay='autoplay' width='408' height='520' style='z-index: 1;' data-setup='{}'>
<source src="#DOSSIER_SQUELETTE/video/bub_Intro.<?php echo $extension; ?>" type="<?php echo $type; ?>" />
</video>
The "$extension" and "$type" are meant to choose the right video for the right browser. I used to use the videoJS solution (<video> <source [..]/> <source [...] /> <source [...] /> </video>) but had to change in order to make i-dont-remember-what working.
I also included on my css :
video#videoDAVI_html5_api{ width: 408px; height: 520px; }
Because i saw throught a web inspector simulator that the code on the iPad was
<video id="videoDAVI_html5_api" autoplay src="video.mp4"></video>
(+ i forgot i'm also using easySlider 1.7)
Thanks
I finally had it work on iPad.
I had this code under the <video id="videoDavi"></video>
<script>
var homePlayer=_V_("videoDavi");
</script>
and had the video-js.css (it wasn't needed for the others, i still don't understand why iPad needs it)
Now it's not working at all on Android/Chrome, but working on Android/Firefox.. But I guess I'll find why, didn't have search yet.
I'd like to load a video to play on desktops and tablets, but prevent it from loading on iPhones because it's just a graphical element.
Here's my code:
<video width="980" height="400" poster="/poster.jpg" autoplay loop>
<source src="/images/front.mp4" type="video/mp4">
<source src="/images/front.webm" type="video/webm">
Your browser does not support the video tag.
</video>
How can I tell iPhones to not load the video but just display the poster frame?
Thanks.
Something like this should work:
<script>
var videoElement = document.getElementsByTagName("video")[0];
if ((navigator.userAgent.match(/iPhone/i)) || (navigator.userAgent.match(/iPod/i))) {
videoElement.parentNode.removeChild(videoElement);
videoElement.pause();
}
</script>
This assumes you only have one video element on the page.
Also, be sure to put the JavaScript before the closing body element or put it in an external JavaScript file.
I have some problems when putting images in my iPhone app using PhoneGap.
According to this website the width of any iPhone screen is 320pts.
In my CSS I have the following code:
#someId {
position:absolute;
top:0px;
left:0;
max-width:640px;
max-height: auto;
}
And in my HTML file the following snippet:
<img src="image.png" id="someId" alt="">
However, if I leave it like this, the image will always be bigger than the actual screen. I'm using the iPhone 6.0 Simulator.
Changing the value of max-width to 320pt doesn't change anything.
Does anyone have experience with this?
Because so many websites are designed assuming a typical desktop-sized browser window, Mobile Safari renders pages at the default width of 980 pixels. To override this default so that it only renders websites at the width of the screen, use the following <meta> element:
<meta name="viewport" content="width=device-width">
I read a lot of articles about how build a web site for iphone, all people have more and less the same technique for optimization a website for iphone.
I follow the suggestions, I use the difference css file (iphone.css - i just need the optimization for iphone not all phone) and I tried with a IE conditional and without. I tried also a inline css, inside a common style.css. And finally i also add a meta tag with scalation...but nothing! The iPhone doesn't want read my rules.
I don't have a iPhone i use iPhoney program (I also tried something else but they aren't very good) and sometimes I check form friends iPhone.
My problem is that my main menu that is long like all the page break and going down over the content. Just this. I just need to tell that the screen is more little (min-width-divide) but it doesn't work! And the css doesn't work (i tried to put #menu: display:none and the menu was still there). But the directory is right because if i see the site form my laptop i can see the css and can go inside!
The web site is built in wp, i don't know if it's important but it's so simple web site.
Make sure you target the iPhone with something like this:
<!--[if !IE]>-->
<link type="text/css" rel="stylesheet" media="only screen and (max-device-width: 480px)"
href="mobile.css">
<!--<![endif]-->