I have embedded a video, via my desktop the video is played normally after I click the playbutton.
<!doctype html>
<html class="no-js" lang="de">
<head>
<meta charset="utf-8">
</head>
<body>
<video class="video-html" playsinline="" loading="" controls="true" preload="auto" muted="" src="video.mp4"></video>
</body>
</html>
In the picture you can see the frame at second 0 (Desktop):
Here also the first frame in the picture, on the iPhone
The video also jumps directly to second 5.
Does anyone have a suggestion how I can solve this problem?
Related
Smartphone users of my webpage should get the embedded background introduction video in the 9:16 format. However, on iOS, they get only the poster jpg which is deposited for the 9:16 mp4 in the case the line is too slow. On a test iPad in the portrait orientation the 9:16 video works, I don' understand why? On iPhones the orientation doesn't matter (no playback). The video plays as expected on all tested Android phones and the Chrome device simulator.
Here is only the code of my webpage that should handle the intro background video.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
<title>
Demo
</title>
<style>
.videoBg{
position: relative;
width: auto;
background-color: rgba(0,0,0,7.0);
}
#media only screen and (min-width: 900px){
.moveMobil{
display: none;}
}
#media only screen and (max-width: 900px){
.moveBig {
display: none;}
}
</style>
</head>
<body>
<div class="main">
<div class="videoBg">
<video poster="https://mixkit.imgix.net/videos/preview/mixkit-friends-with-colored-smoke-bombs-4556-0.jpg?q=80&auto=format%2Ccompress&w=460"
class="moveBig"
src="https://assets.mixkit.co/videos/preview/mixkit-friends-with-colored-smoke-bombs-4556-large.mp4" type="video/mp4" autoplay="true" loop="true" muted="true" width="100%"></video>
<video poster="https://mixkit.imgix.net/videos/preview/mixkit-portrait-of-a-woman-in-a-pool-1259-0.jpg?q=80&auto=format%2Ccompress&w=460"
class="moveMobil" src="https://assets.mixkit.co/videos/preview/mixkit-portrait-of-a-woman-in-a-pool-1259-large.mp4"
type="video/mp4" autoplay="true"loop="true"muted="true" width="100%"></video>
</div>
</div>
I used as base the example code from Hossam Elnaggar https://stackoverflow.com/a/57281456/2556324 which showed so far the best display outcome.
Maybe I am gone in the false direction?
Looks like the playsinline was the missing part.
This post was the key: https://stackoverflow.com/a/51432655/2556324
The resolution of my iPad 8 is 2160x1620. When I build a website with a div that is 1000 pixels wide, that div is nearly 90% wide on my iPad's screen. That is not what I expected.
On my iMac (full HD) the div is displayed with the correct width. How can I solve this?
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>
<body>
<div style="width: 1000px; background-color: aqua; height: 10px"></div>
</body>
</html>
Try setting this in the <head> portion of your page:
<meta name="viewport" content="width=device-width, initial-scale=1.0">
This should make your document scale correctly with your device's screen resolution.
You can read more about how it works on W3Schools.
I'm using videojs-youtube, and while I can get the video player to display in youtube, if I try to control it programattically the player breaks (goes black) on ipad. Not sure if this is a problem with video.js or videojs-youtube.
I have created a simple test to just play the video on load. When this executes on ipad, the player turns black, no video or controls are available. I don't see any errors when debugging the ipad w/safari on my connected mac.
<!DOCTYPE html>
<html>
<head>
<link href="http://vjs.zencdn.net/4.3/video-js.css" rel="stylesheet">
</head>
<body>
<video id="vid3" src="" class="video-js vjs-default-skin" controls preload="auto" width="640" height="360">
</video>
<script src="js/vendor/video.dev.js"></script>
<script src="js/vendor/vjs.youtube.js"></script>
<script>
videojs('vid3', { "techOrder": ["youtube"], "src": "http://www.youtube.com/watch?v=xjS6SftYQaQ" }).ready(function() {
this.play();
});
</script>
</body>
</html>
I figured this out. Apple does not allow 'autoplaying' of video on ios devices. I was able to do other things such as this.on("timeupdate"...
I am trying to accomplish a simple slide in popup animation in jquery mobile. I tested this on the desktop browser (chrome and firefox) and works fine. But in mobile i get the following results on pressing the button:
The popup comes in fine but creates a white space to the right of the screen which is visible if the user slides to the right. Dismissing the popup removes this white space. This only happens if the popup is triggered using "slide" transition. Does anyone know the reason for this behavior.
I can manually resize the window but I am not sure what event fires after the popup is done sliding in.
(I had images to show this but I don't have 10 rep so I cannot post them :( )
Does anyone know why this is happening. I am testing with Droid Razr Maxx (running Jelly Bean). I have tested with chrome, firefox and the default browser on the device. They all produce the same result. Here is my code:
<!DOCTYPE html>
<html ng-app>
<head lang="en">
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1">
<link href="http://code.jquery.com/mobile/1.3.1/jquery.mobile-1.3.1.css" rel="stylesheet" type="text/css" />
<script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
<script src="http://code.jquery.com/mobile/1.3.1/jquery.mobile-1.3.1.min.js"></script>
</head>
<body>
<div data-role="page">
Pop Up
<div data-role="popup" id="pop" data-overlay-theme="a">
<p>Basic Popup Basic Popup Basic Popup Basic Popup Basic Popup Basic Popup Basic Popup</p>
</div>
</div>
</body>
</html>
Upon further research, I found out that this issue was fixed in the latest version of jquery mobile (1.4) which is still in alpha phase.
http://jsbin.com/edeluh/32
When I view the following html file with Safari in an iphone, it does not display the entire width of the content as it's supposed to:
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>iOS Viewport Test</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0"/>
<style type="text/css">
body #wrap {
width: 1008px;
border: 1px solid #000;
}
h1 {
font:30px sans-serif;
}
</style>
</head>
<body>
<div id="wrap">
<h1>Here's some quite eloooongated text that should make the screen at least 1008px wide or more</h1>
</div><!-- end #wrap -->
</body>
</html>
Can anyone see what I'm doing wrong? For what it's worth, I have iOS 6.1 and Safari 6.0
Even though I read apple's various viewport guidelines very carefully, apparently I misunderstood. If a site is non-responsive, like mine, the correct meta in this case is
<meta name="viewport" content="width=1008"/>
This makes the viewport fit the content in both portrait & landscape orientation. There's a discussion of this approach here: http://webdesignerwall.com/tutorials/viewport-meta-tag-for-non-responsive-design
I was googling to see if anyone else had encountered this issue as well. Thought I'd share my results.
My non-responsive site is about 1200px wide, and I wanted it to show the whole site's width while in portrait mode. Setting the scale to 0 also seems to work on what I've tested:
<meta name="viewport" content="width=device-width, initial-scale=0"/>