HTML5 Video or JavaScript variable as input to HTML2Canvas - javascript

I already looked all around StackOverflow and Google to find a solution to this question but so far no luck.
Got a HTML page with dynamically rendered content from Django. All works good with standard text and images, however from time to time it also shows HTML5 Video element which in screenshot appears as a black image and thats it. Adding poster to it did not help. Does anyone know is it somehow possible to actually take screenshot of html5 video element? (not flash etc)
If not, my 2nd approach was to create a js variable with html content inside and then replace video with image created from poster attribute of the video. After that send that js variable to html2canvas for screenshot. Reason for this is I CAN'T alter page look and feel for user so I need to do this stuff in the background somehow. Idea was to use
var content = $(".content").html();
content.replace(video, image); // pseudo here for sake of question
html2canvas(content, { ...
However this only keeps giving me Uncaught TypeError: Cannot read property 'images' of undefined so that idea fails...
Does anyone know how to make this to actually work or maybe has any other idea how to replace video with image for the sake of html2canvas screenshot but with user not seeing any changes on the website?
Thanks a lot in advance!!!

It is possible to capture html5 video element onto the "screenshot" presuming it doesn't taint the canvas (i.e. cross-origin content).
Currently, html2canvas doesn't support capturing videos nor poster images, but pull requests are always welcome.

Related

Problem rendering image inside the amp-truncate-text tag

I am having a problem with AMP.
I'm trying to implement a read more button, but when there are images, videos, advertisements in the amp-truncate-text tag, it doesn't load the images, it gets a loading icon, but without showing the image.
I made an example using the AMP playground using the following code as an example.
Has anyone faced this problem and has any idea how I can solve it?
amp-trunkcate-text ist still in the experimental status. DO you have enable the experimental status?

<video> rendered inside <template> shows black for webcam stream (Safari 14.0.3 only)

Important notice - this is happening only on Safari 14.0.3!
After macOS and Safari update (14.0 -> 14.0.3) video stream from the webcam I'm getting using navigator.mediaDevices.getUserMedia shows only black inside <video> for some time and updates to actual video at some point (sometimes not). This is situated inside <template> which I add to DOM using JavaScript.
In short:
<template><video></video></template> (shows black)
<video></video> (shows ok)
JsFiddle with the reproducible demo - https://jsfiddle.net/alex_oliynyk/402ed6wq/54/
Gif with the issue - https://share.getcloudapp.com/2NuElvYl
Also, I can confirm that video is actually playing fine. This is part of the app where I send frames from the video to the backend for processing and I get a successful response. This means that frames are not just black rectangulars but are proper images.
Any idea how to can I make the video appear right away?
Cheers!
UPD: fixed typo in <template>
After a decent amount of back-and-forth, I've found a workaround to make it work.
Basically, when getUserMedia is called I programmatically create a video tag, add a video stream to it, add it to the DOM. Having container div helps a lot to position it in the right spot.
Working demo - https://jsfiddle.net/alex_oliynyk/402ed6wq/95/
Also submitted the bug report for the WebKit team.
Best,

<Audio> el added by js skips, but audio added into HTML works just fine

I've been trying to figure this out for a long time, and I don't understand what the issue is.
If I add an <Audio> HTML element on the page itself, the song loads and plays just fine; no skipping.
When I add a new Audio() in js, set the src, and insert it into the HTML, it skips. What is different from it? I've matched them 1:1 with the settings (autoload, etc) and they act differently. Maybe I'm doing something incorrectly?
I'll attach the CodePen. I had some test functions, but even just placing the Audio (when those are commented out) don't work 1:1. Any ideas? Thanks in advance!
https://codepen.io/jrhager84/pen/VwLoXKX
I spend a lot of time for debugging case "why videos with sound can't use autoplay"? And i found that it's stucks on browsers policy.

Using JavaScript to wrap the HTML5 video element breaks video player in iOS

I am using JavaScript to wrap an HTML5 video player in a div for styling purposes. If the mark-up exists when the page loads, the player functions as it should. However if I apply the wrapper dynamically with JavaScript, the player goes black and its controls are inaccessible. I have tested applying various elements as wrappers, and it seems to happen with any block level element, but not inline elements. I can't find any documentation on this bug or others who have encountered it via Google. Anyone have a workaround?
I see this was posted a long time ago & I ran into a similar issue.
When a video is reparented (like it would be if you used a solution like slick, it reverts to 00:00 and pauses. Once reparented, you should be able to directly access the video via JS & invoke the play() method to get it started again.

TinyMCE Moxie Player Media Splash Image?

Is there a way to get moxie player, which is packaged with TinyMCE, to display a splash image when you embed a video via the WYSIWYG tool? I've been Googling and playing with it for a while with no success at this point. I'm using TinyMCE 3.4.2 in production and have tried 3.4.3 in development, but it doesn't seem to work correctly. Honestly, I'm not even sure what the actual params are for this player since the documentation on the legal flashvars appears to be non existent. From what I can tell, the "poster" param should be what I need, but setting that when I embed the video object seems to do nothing. The only official documentation I've found so far is: http://tinymce.moxiecode.com/wiki.php/Plugin:media and that just gives the general params to pass into TinyMCE for the media plugin itself, not how to actually use the player.
Here is what I'm currently setting in the flashvars param tag
<param name="flashvars" value="url=http%3A//url/to/some.flv&poster=http%3A//url/to/some.jpg" />
Any ideas? I'd prefer to keep using the stock TinyMCE implementation if at all possible and this player, along with the WYSIWYG tool otherwise addresses the business issue perfectly for my company.
You can't do it with current version of moxieplayer.
swfdump (from Flex SDK) on moxiplayer.swf doesn't show any reference to the poster parameter, just the url one.
This is an open request feature. Just vote for it!
Currently you can only set a poster image using the HTML5 Video tag. You can validate this here by clicking the insert media button, selecting HTML5 video and assigning a poster image in the advanced tab.
After that just hit submit to see the resulting example and the corresponding HTML.

Categories