Can you superimpose canvas over video in IOS safari (IPAD)?
I tried adding text to the canvas but it does not show up on top of the video playing.
ON SAfari desktop it just works fine.
video_dom.addEventListener('play', function() {
ctx_overlay.font = "bold 16px sans-serif";
ctx_overlay.fillStyle="black";
ctx_overlay.fillText("Video1 Video1 Video1", 200, 225);
}, false);
<video id="video-canvas-fancy" loop autoplay loop height="640" width="965" style="position:absolute; top: 5; left: 5;">
<source src="http://severe-fire-901.heroku.com/videos/home.m3u8">
</video>
<canvas id="canvas-overlay" height="640" width="965" style="position:absolute; top: 10; left: 10;">
</canvas>
Please give more details or a code example in the future.
You mean <video>? With absolute positioning you should be able to put anything over it.
If you can't for some (buggy) reason on IOS, you can always use a <canvas> to render the video (call context.drawImage(video,0,0) every x frames per second) and then either render stuff on top of that or on top of a second canvas.
Related
I have embedded HTML5 video with mp4 format. How to get thumbnail image like poster without using "poster" attribute. This problem coming on Safari and iOS. I have added video like below mentioned code.
<video height=350 id='TestVideo' webkit-playsinline><source src='test.mp4' type=video/mp4></video>
On Chrome, IE, Firefox first frame of video coming as thumbnail image, but not coming on Safari and iOS.
simply add preload="metadata" in video tag and set #t=0.1 at url src, it will get the frame of 0.1s of your video as thumbnail
however, the disadvantage of this solution is when you click to play the video, it always start at 0.1s
<video preload="metadata" controls>
<source src="video.mp4#t=0.1" type="video/mp4">
</video>
If you want to do this without storing server side images it is possible, though a bit clunky... uses a canvas to record the first frame of the video and then overlay that over the video element. It may be possible to use the URL for the Canvas as a source for the Poster (eg video.poster = c.toDataURL();) but that requires correct CORS setup (not sure if the video was on your own server, and if you have control over that, so took the safest option). This will work best if video is correctly encoded for streaming (so MOOV atom is at the front of the video, otherwise it will be slow to draw the overlay - see this answer for more detail)
The HEAD contains styling for the video and the overlay (you will need to adjust sizing and position to suit your application)
<head>
<style>
video_box{
float:left;
}
#video_overlays {
position:absolute;
float:left;
width:640px;
min-height:264px;
background-color: #000000;
z-index:300000;
}
</style>
</head>
In the BODY you will need the div for the overlay and the video. The overlay div has an onclick handler to hide the overlay and start the video playing
<div id="video_box">
<div id="video_overlays" onclick="this.style.display='none';document.getElementById('video').play()"></div>
<video id="video" controls width="640" height="264">
<source src="BigBuck.mp4" type='video/mp4'>
</video>
</div>
</div>
Finally you will need code that will load the video, seek to the first frame and load the visual into a canvas that you then insert into the overlay
<script>
function generateOverlay() {
video.removeEventListener('seeked',generateOverlay); / tidy up the event handler so it doesn't redraw the overlay every time the user manually seeks the video
var c = document.createElement("canvas");
var ctx = c.getContext("2d");
c.width = 640;
c.height = 264;
ctx.drawImage(video, 0, 0, 640, 264); // take the content of the video frame and place in canvas
overlay.appendChild(c); // insert canvas into the overlay div
}
// identify the video and the overlay
var video = document.getElementById("video");
var overlay = document.getElementById("video_overlays");
// add a handler that when the metadata for the video is loaded it then seeks to the first frame
video.addEventListener('loadeddata', function() {
this.currentTime = 0;
}, false);
// add a handler that when correctly seeked, it generated the overlay
video.addEventListener('seeked', function() {
// now video has seeked and current frames will show
// at the time as we expect
generateOverlay();
}, false);
// load the video, which will trigger the event handlers in turn
video.load();
</script>
this is a bit late but we had the same scenario. I can't use the attribute 'muted' because my videos are podcasts. This is what I came up with and I hope to share it with future visitors. What I did is load the video in the body tag, drew a canvas, retrieved as base64 and applied to the video as the background image.
Since my video should be fixed 150px in height, I computed the aspect ratio so that whatever height and width of the actual video, it will be resized into 150px height and dynamic width.
$('body').append('<video class="checkmeload" style="position:absolute;top:-10000px" controls preload="auto" playsinline src="//src-here"><source src="//src-here" type="//videotype-here"></video>');
$('body').find('.checkmeload').on('loadeddata', function(){
var video = $('.checkmeload');
var canvas = document.createElement('canvas');
aspectratio = (video[0].videoWidth / video[0].videoHeight);
newwidth = (150 * aspectratio);
canvas.width = newwidth;
canvas.height = 150;
var context = canvas.getContext('2d');
context.drawImage(video[0], 0, 0, canvas.width, canvas.height);
var dataURI = canvas.toDataURL('image/jpeg');
$('body').find('.checkmeload').remove();
$('#myvideo').css('background-image','url("'+dataURI +'")');
});
Source: How to set the thumbnail image on HTML5 video?
This worked for me:
<img src="thumbnail.png" alt="thumbnail" />
/* code for the video goes here */
Now using jQuery play the video and hide the image as
$("img").on("click", function() {
$(this).hide();
// play the video now..
})
Add #t=0.001 at the end of the video URL.
https://muffinman.io/blog/hack-for-ios-safari-to-display-html-video-thumbnail/
This is weird. I'm playing with device orientation but can't seem to get rotateX and rotateY to work in Safari (iOS 8.0.2).
But! if I save it to my home screen with apple-web-app-capable meta tag it works fine.
This is my script:
$( document ).ready(function() {
window.addEventListener("deviceorientation", handleOrientation, true);
function handleOrientation(e) {
var alpha = e.alpha;
var beta = e.beta;
var gamma = e.gamma;
$('#z').val(Math.round(alpha)); // Z
$('#x').val(Math.round(beta)); // X
$('#y').val(Math.round(gamma)); // Y
document.getElementById("box").style.webkitTransform="rotateZ("+Math.round(-alpha)+"deg) rotateX("+Math.round(beta)+"deg) rotateY("+Math.round(-gamma)+"deg)";
}
});
you can see it here live (on your iPhone): http://kohlin.net/matte/orientation.html
Then try saving it to your home screen.
Any clues? A bug?
This is a bug in ios Safari browser.
To fix this, surround the box div with another tag. Then move the css:
-webkit-perspective: 500px;
to the containing div. This should make the rotating box visible.
I have rel=0 in my embed code so when the video ends it returns to the start. But it's displaying the thumbnail for the video, after returning, with the thumbnail blown up to the full video size, so the image is extremely blurry. How can I get the full 1280 x 720 image I uploaded for the thumb to be displayed?
Thanks
You could, for example, detect when the video has ended and then overlay the video with your image. For example:
HTML:
<script src="//www.youtube.com/iframe_api"></script>
<div id='yt_container'>
<iframe id='element_id' width="853" height="480" src="//www.youtube.com/embed/LqeN31x-5gE?autoplay=1&enablejsapi=1&rel=0&start=248" frameborder="0" allowfullscreen></iframe>
<!--Seems like people always forget to encode & as &-->
<!--The "start" parameter was added for easier testing-->
<!--The `enablejsapi=1` parameter is required for this to work. For more information, see https://developers.google.com/youtube/iframe_api_reference
<div id='player_overlay_image'> </div>
</div>
CSS:
iframe,img,div{/*If you use this on a real web page, you will want to make these rules more specific*/
padding:0;
margin:0
}
div#yt_container{
position:relative;/* https://stackoverflow.com/a/105035/1419007 */
}
div#player_overlay_image{/* The high-resolution image for when your video has ended. Includes a ▶ button. */
display:block;
position:absolute;
top: 29px;
background: url('//i.imgur.com/JhDUWdI.png');
width:853px;
height:408px;
display: none;
cursor:pointer;
}
div#player_overlay_image:hover{/* ▶ button in active state. */
background: url(//i.imgur.com/ljKjsD4.png);
}
JavaScript:
var yt_player;
function onYouTubeIframeAPIReady() {
yt_player = new YT.Player('element_id', {
events: {
'onStateChange': onPlayerStateChange
}
});
}
function onPlayerStateChange(event) {
if(event.data === YT.PlayerState.ENDED){
//Display overlay image
document.getElementById('player_overlay_image').style.display='block';
}
}
document.getElementById('player_overlay_image').addEventListener('click', function(evt){
//Hide overlay image
document.getElementById('player_overlay_image').style.display='none';
//Play video
yt_player.playVideo();
}, false);
(See the YouTube Player API Reference for iframe Embeds for more information.)
http://jsfiddle.net/y3Xqj/1/
I had the same problem and it didn't got solved by itself. This is how I solved the issue:
I used the youtube iframe api and rewinded the video to the start once the video ended, that way the thumbnail looks good as it was when the page loaded.
YoutubeF is the iframe id.
Code:
var YTplayer;
function onYouTubeIframeAPIReady()
{
YTplayer = new YT.Player('YoutubeF', { events: { 'onStateChange': onYTPlayerStateChange } });
}
function onYTPlayerStateChange(event)
{
if (event.data == 0)
{
YTplayer.seekTo(0, false)
}
}
Enjoy!
I have a YouTube video embedded on our website and when I shrink the screen to tablet or phone sizes it stops shrinking at around 560px in width. Is this standard for YouTube videos or is there something that I can add to the code to make it go smaller?
You can make YouTube videos responsive with CSS. Wrap the iframe in a div with the class of "videowrapper" and apply the following styles:
.videowrapper {
float: none;
clear: both;
width: 100%;
position: relative;
padding-bottom: 56.25%;
padding-top: 25px;
height: 0;
}
.videowrapper iframe {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}
The .videowrapper div should be inside a responsive element. The padding on the .videowrapper is necessary to keep the video from collapsing. You may have to tweak the numbers depending upon your layout.
If you are using Bootstrap you can also use a responsive embed. This will fully automate making the video(s) responsive.
http://getbootstrap.com/components/#responsive-embed
There's some example code below.
<!-- 16:9 aspect ratio -->
<div class="embed-responsive embed-responsive-16by9">
<iframe class="embed-responsive-item" src="..."></iframe>
</div>
<!-- 4:3 aspect ratio -->
<div class="embed-responsive embed-responsive-4by3">
<iframe class="embed-responsive-item" src="..."></iframe>
</div>
Refined Javascript only solution for YouTube and Vimeo using jQuery.
// -- After the document is ready
$(function() {
// Find all YouTube and Vimeo videos
var $allVideos = $("iframe[src*='www.youtube.com'], iframe[src*='player.vimeo.com']");
// Figure out and save aspect ratio for each video
$allVideos.each(function() {
$(this)
.data('aspectRatio', this.height / this.width)
// and remove the hard coded width/height
.removeAttr('height')
.removeAttr('width');
});
// When the window is resized
$(window).resize(function() {
// Resize all videos according to their own aspect ratio
$allVideos.each(function() {
var $el = $(this);
// Get parent width of this video
var newWidth = $el.parent().width();
$el
.width(newWidth)
.height(newWidth * $el.data('aspectRatio'));
});
// Kick off one resize to fix all videos on page load
}).resize();
});
Simple to use with only embed:
<iframe width="16" height="9" src="https://www.youtube.com/embed/wH7k5CFp4hI" frameborder="0" allowfullscreen></iframe>
Or with responsive style framework like Bootstrap.
<div class="row">
<div class="col-sm-6">
Stroke Awareness
<div class="col-sm-6>
<iframe width="16" height="9" src="https://www.youtube.com/embed/wH7k5CFp4hI" frameborder="0" allowfullscreen></iframe>
</div>
</div>
Relies on width and height of iframe to preserve aspect ratio
Can use aspect ratio for width and height (width="16" height="9")
Waits until document is ready before resizing
Uses jQuery substring *= selector instead of start of string ^=
Gets reference width from video iframe parent instead of predefined element
Javascript solution
No CSS
No wrapper needed
Thanks to #Dampas for starting point.
https://stackoverflow.com/a/33354009/1011746
I used the CSS in the accepted answer here for my responsive YouTube videos - worked great right up until YouTube updated their system around the start of August 2015. The videos on YouTube are the same dimensions but for whatever reason the CSS in the accepted answer now letterboxes all our videos. Black bands across top and bottom.
I've tickered around with the sizes and settled on getting rid of the top padding and changing the bottom padding to 56.45%. Seems to look good.
.videowrapper {
position: relative;
padding-bottom: 56.45%;
height: 0;
}
#magi182's solution is solid, but it lacks the ability to set a maximum width. I think a maximum width of 640px is necessary because otherwhise the youtube thumbnail looks pixelated.
My solution with two wrappers works like a charm for me:
.videoWrapperOuter {
max-width:640px;
margin-left:auto;
margin-right:auto;
}
.videoWrapperInner {
float: none;
clear: both;
width: 100%;
position: relative;
padding-bottom: 50%;
padding-top: 25px;
height: 0;
}
.videoWrapperInner iframe {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}
<div class="videoWrapperOuter">
<div class="videoWrapperInner">
<iframe src="//www.youtube.com/embed/C6-TWRn0k4I"
frameborder="0" allowfullscreen></iframe>
</div>
</div>
I also set the padding-bottom in the inner wrapper to 50 %, because with #magi182's 56 %, a black bar on top and bottom appeared.
Modern simple css solution
The new aspect-ratio is the modern solution to this problem.
aspect-ratio: 16 / 9;
That's all you need to make a div, image, iframe size automatically. Samples.
It's got good support, but is not yet in Safari (will be for upcoming iOS15) - so for now you'll still need to use a fallback. You can achieve that with the #supports feature
.element
{
aspect-ratio: 16 / 9;
#supports not (aspect-ratio: 16 / 9)
{
// take your pick from the other solutions on this page
}
}
Assuming your development browser does support this property be sure to test without it by commenting out both aspect-ratio and #supports.
This is old thread, but I have find new answer on https://css-tricks.com/NetMag/FluidWidthVideo/Article-FluidWidthVideo.php
The problem with previous solution is that you need to have special div around video code, which is not suitable for most uses. So here is JavaScript solution without special div.
// Find all YouTube videos - RESIZE YOUTUBE VIDEOS!!!
var $allVideos = $("iframe[src^='https://www.youtube.com']"),
// The element that is fluid width
$fluidEl = $("body");
// Figure out and save aspect ratio for each video
$allVideos.each(function() {
$(this)
.data('aspectRatio', this.height / this.width)
// and remove the hard coded width/height
.removeAttr('height')
.removeAttr('width');
});
// When the window is resized
$(window).resize(function() {
var newWidth = $fluidEl.width();
// Resize all videos according to their own aspect ratio
$allVideos.each(function() {
var $el = $(this);
$el
.width(newWidth)
.height(newWidth * $el.data('aspectRatio'));
});
// Kick off one resize to fix all videos on page load
}).resize();
// END RESIZE VIDEOS
If you are using Bootstrap 5.0, you can use .ratio
https://getbootstrap.com/docs/5.0/helpers/ratio/
Example
<div class="ratio ratio-16x9">
<iframe src="https://www.youtube.com/embed/zpOULjyy-n8?rel=0" title="YouTube video" allowfullscreen></iframe>
</div>
With credits to previous answer https://stackoverflow.com/a/36549068/7149454
Boostrap compatible, adust your container width (300px in this example) and you're good to go:
<div class="embed-responsive embed-responsive-16by9" style="height: 100 %; width: 300px; ">
<iframe class="embed-responsive-item" src="https://www.youtube.com/embed/LbLB0K-mXMU?start=1841" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen="" frameborder="0"></iframe>
</div>
Okay, looks like big solutions.
Why not to add width: 100%; directly in your iframe. ;)
So your code would looks something like <iframe style="width: 100%;" ...></iframe>
Try this it'll work as it worked in my case.
Enjoy! :)
I make this with simple css as follows
HTML CODE
<iframe id="vid" src="https://www.youtube.com/embed/RuD7Se9jMag" frameborder="0" allowfullscreen></iframe>
CSS CODE
<style type="text/css">
#vid {
max-width: 100%;
height: auto;
}
I am developing an iPad application with Phonegap and jQuery mobile. One of the functions required is to allow the user of the app to sign (their signature) in 2 boxes. I am using easel.js to handle the "drawing" on the canvas element.
The HTML structure of this page is something like:
<div class="signature-wrapper sw1">
<canvas class="flexBox" id="myCanvas" width="240" height="240"></canvas>
</div>
<div class="signature-wrapper sw2">
<canvas class="flexBox" id="myCanvas2" width="240" height="240"></canvas>
</div>
Where the 2 canvas elements are where the signatures will be drawn. Below each of these elements are buttons to clear and save each of the elements. When clicked, they fire functions to clear the canvas, or save the canvas to an image (the image is then placed over the canvas, and removed on clear)
The save functionality looks something like:
function saveStage1(){
var canvas = document.getElementById("myCanvas");
var imageData = canvas.toDataURL("image/png");
$('.sw1').append("<img src='" + imageData +"' style='position: absolute; left: 0px; top: 0px;' />");
}
Basically, it is just getting the content of the canvas and saving it to a PNG image, which is then appended to the wrapper for the canvas elements. There is additional code I have left out of the code here for clarity, dealing with localStorage and db.transactions.
This function is working as expected.
The next function is to clear the canvas:
function clearStage1(){
oldMidX, oldMidY, oldX, oldY = null;
delete window.currentShape;
stage.clear();
stage.removeAllChildren();
stage.update();
var canvas = document.getElementById("myCanvas");
var context = canvas.getContext("2d");
var imageObj = new Image();
imageObj.onload = function() {
context.drawImage(imageObj, 0, 0);
};
imageObj.src = 'images/signature-client.png';
$('.sw1 img').remove();
}
This clears the canvas, nulls some variables, and recreates the canvas.
This works 100% in chrome and safari, but does not work correctly on iPad as a Phonegap application. On iPad, you can draw, but once you have clicked save or clear you are unable to draw without navigating away and back to the screen. It seems there is a JavaScript error somewhere on the page on both the save and clear functions which is preventing any further JavaScript from executing without "reloading" the page.
I have setup my console in Safari on mac to look at xcode application, and there is no error in the log. Any help would be appreciated.