I am building a website that plays an icecast mp3 stream using jPlayer and I'd want it to display the poster when listening the stream and the phone is locked.
jPlayer generates the following code which I guess it's the code that iOS uses for playing the audio, correct me if I am wrong.
<div id="jquery_jplayer_1" class="jp-jplayer" style="width: 0px; height: 0px;">
<img id="jp_poster_1" src="https://example.com/wp-content/uploads/2018/09/logo.jpg" style="width: 0px; height: 0px; display: inline;">
<audio id="jp_audio_1" preload="none" src="http://example.com:8000/stream_64.mp3"></audio>
</div>
iOS only supports the poster art for video tags: Audio and Video HTML
Related
I'm using WKWebView to display html5 video element. When view is loaded initially there is play button (big round button). If you press it built-in video fullscreen controller is displayed and video starts playing.
While video is playing press "Done" button:
1. fullscreen controller collapses and I see my webview
2. but there is no play button anymore (so I can't start playing video again)
If you first pause video and that press "Done", or watch video to the end and then press "Done" everything is fine.
Works on IOS8 without issues.
Is it IOS9 bug, or I have something configured wrong?
What workarounds are possible?
Here is html that is loaded into webview:
#"<!DOCTYPE html>
<html>
<head>
<meta name=""viewport"" content=""width=device-width, initial-scale=1, user-scalable=no"">
<style>
html, body {{
margin: 0;
padding: 0;
background-color: #000;
}}
video {{
background-color: #000;
width: 100%;
height: auto;
max-height: 100%;
margin: auto;
top: 0;
left: 0;
bottom: 0;
right: 0;
position: absolute;
}}
</style>
</head>
<body>
<video poster=""{0}""><source src=""{1}"" /></video>
</body>
</html>";
The problem was missed controls attribute.
From Apple documentation:
The HTML5 and tags make it simple to add media to your website. Just include the <audio> or <video> element, use the src attribute to identify the media source, and include the controls attribute.
https://developer.apple.com/library/content/documentation/AudioVideo/Conceptual/Using_HTML5_Audio_Video/Introduction/Introduction.html
I want to embed videos on my tumblr http://wealhwealh.tumblr.com/, but the block sizes is 250x141. When I start a video, it looks like this:
https://jsfiddle.net/pp4p1efw/
I want the video to expand when the user clicks on play, or on hover. Thanks!
Here's the tumblr html for video:
<video tabindex="-1" class="video-stream html5-main-video" style="width: 250px; height: 141px; left: 0px; top: 0px; transform: none;" src="blob:https%3A//www.youtube.com/48ae4f07-e8b1-4cf0-8890-5a896b7c1c82"></video>
I'm developing a website for my company, and there is a page that has 8 videos, using HTML5 video tag. It looks like this:
<div style="CLEAR:both; text-align: center; max-width: 100%; ">
<video preload="none" id="video1" width="480" height="360" controls poster="/images/video_thumbnails/poster1.png">
<source src="/videos/video1.mp4" type="video/mp4">
Please update your browser.
</video>
</div>
This is my CSS:
video {
width: 482px;
height: 362px;
padding: 2px;
background-color: black;
}
All my videos and posters are 480x360pixel in size. It looks fine on popular browsers, but on iPad 7, in Portrait mode only, one of the 8 videos always have wrong size like this:
If I rotate my iPad to landscape, it's ok. If I play that bugged video, the video only plays in 480x360 frame, the remaining black border just stays there. And the poster is gone, too, in both Portrait or Landscape.
Found the problem. It may seem weird, but you need to... restart iPad to fix it! There are also other questions similar to this problem, and I followed their answer.
This works fine in any Browser, but not on iOS6 (did not try it with iOS5)
I got an iFrame with a YouTube Video in it, situated in an overlay. After playing the video and toggle the overlay, the video again is broken. The video will playback in the background (you will hear the sound), but its not visible anymore.
Here's a minimal example:
http://jsfiddle.net/s9M6J/2/
<script>
/* jQuery */
$(document).ready(function() {
$('a').click(function() {
$('.videowrapper').toggleClass('hidden');
});
});
</script>
<style>
.hidden{
display: none;
}
</style>
<body>
toggleVideo
<div style="background: green; width: 500px; height: 500px;">
<div class="videowrapper">
<div id="video1">
<iframe width="500" height="315" src="http://www.youtube.com/embed/HMrlFLZFdnQ" frameborder="0" allowfullscreen></iframe>
</div>
</div>
</div>
</body>
Does anyone know a workaround for that?
Got a similar issue when embedding a Brightcove video on a jQuery Mobile page which is shown/hidden via javascript. Works on all desktop browsers and android but not Safari on iOS 6.
According to http://forum.brightcove.com/t5/General-Development/Video-in-show-hide-div-does-not-play-on-iOS/m-p/17558#M2352 a workaround is to hide your videowraper by moving it out of the screen using some CSS like position:absolute;top:-9999px then back to normal positioning when you want to show it.
For jQuery Mobile users it means embedding video iframes on multiple <div data-role="page"> on a single page structure won't work, need to put them on separate html pages.
I have included the Facebook like box code on my website. However for some reason when viewed on an iPad the embedded Youtube links show outside the iframe (the other content does not). I have tried wrapping this with a div and applying overflow: hidden but still no joy.
It works fine on all browsers on the PC (including Safari) and as such I cannot figure out where to go with this one.
Usually with embedded videos I include wmode="transparent" in the embed code which usually sorts it. However because Facebook generates the code so I cannot access the content generated in the widget.
Any help would be much appreciated, as I have been banging my head against the wall about this for days.
Cheers
HTML
<div id="fb-root">
<iframe id="facebookscroller"
src="http://www.facebook.com/plugins/likebox.php?href=http%3A%2F%2Fwww.facebook.com%2Fpages%2FMorgan-Motor-Company%2F209507192406727&width=450&colorscheme=dark&show_faces=false&border_color&stream=true&header=false&height=395"
scrolling="no"
frameborder="0"
style="border:none; overflow:hidden; width:450px; height:395px;"
allowTransparency="false"
wmode="transparent">
</iframe>
</div>
CSS:
#fb-root {
position: absolute;
top: 50px;
right: 10px;
z-index: 4;
height: 395px;
overflow: hidden;
display: block;
}