We Keep Coding

<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,

Youtube embedded video does not work on chrome

For months I've been noticing embedded youtube videos appear white on any other page, now I found out that I can watch those videos by inspecting the page and putting -nocookie at the hostname of the iframe src, i.e. https://www.youtube-nocookie.com/embed/(VIDEO_ID).
I want to know why this happen and how to fix it, my first thought was to make an userscript to change it in every page.
EDIT: It works fine on Edge and Firefox but not on Chrome, even though my settings for cookies are enabled.
SOLUTION: The problem was that my userscript on Tampermonkey extension (which was supposed to affect the youtube page) was affecting every page with an embedded video, from now on I can figure it out what part of the code was doing that but for now it's turned off.
Thanks to #JasonB for the suggestion about extensions.

This -nocookie url came out almost a decade ago when cookies were still often turned off. This codepen shows that the standard youtube embed code works just fine on a simple site.
<iframe width="400" height="300"
src="https://www.youtube.com/embed/9Ht5RZpzPqw" frameborder="0"
gesture="media" allow="encrypted-media" allowfullscreen=""></iframe>
https://codepen.io/anon/pen/baqdGz
Are there any details about your domain or a link to a broken embedded video on your site that might help us better troubleshoot your issue?
The thumbnail worked just fine, I left it open for 5 minutes and then played the video, and that is all functional. Looks like there's one js error related to the codepen setup - not what you're experiencing.

YouTube iFrame API Video Intermittently Playing on Mobile Devices

I've spent way too many hours on this with very little success. We have a client with a site that has a YouTube video popup when the page loads. It autoplays on desktop and shows the Youtube play button on mobile since autoplay is not supported on mobile. I am using the iFrame JS API to instantiate the video player (code examples below). This setup is working perfectly on desktop, but on mobile devices (Android or iOS), between myself and my coworkers, clicking the Youtube play button only plays the video about 80% of the time. The rest of the time the video loading spinner just spins and nothing happens. If I close a reload the player using the site controls it will play, but not initially.
I know that this will not be an issue for the majority of users viewing the site but I know our client is going to go ape crazy if, out of 100 reloads on their iPhones, even 10 of them result in this behavior.
I am instantiating the player as follows:
1) I am including a "hard copy" of the Youtube iframe api JS on the site first.
2) I have an object controlling the display of the youtube "modal" window that contains the player target -- when the function is called it does the following:
// Write a div element to the container
_instance.videoContainer.innerHTML = '<div id="youtube-player"></div>';
// Grab a reference to it
_instance.el = document.getElementById('youtube-player');
// Call the YT player API
_instance.player = new YT.Player('youtube-player', {
playerVars: { // trying a bunch of different params with no success
playsinline : 1 ,
origin : window.location.origin ,
autoplay : 1 ,
wmode: "opaque" ,
iv_load_policy : 3
},
videoId: videoId , // This is passed to the function
events : {
onReady : function(){
console.log('resolved player');
// another function that just changes the container visibility
_instance.play();
},
onStateChange : function( event ){
if( event.data == YT.PlayerState.ENDED ){
_instance.close();
}
}
}
});
At this point, the video is either playing automatically in desktop 100% of the time, or it has shown the Youtube player with the video thumbnail and big red play button on mobile. This is where the trouble starts -- most of the time it plays fine, the rest of the time it just spins and spins and never plays. What's interesting is, on Android, if I blur the window and reopen it, I can click the play button again and it will play.
It shouldn't matter at this point, but I am destroying the div and the player reference when the modal is closed.
I've tried pretty much everything I can think of...
The Youtube video is somehow being throttled and only showing so many times through the iframe to the origin? I added the 'origin' property to the params thinking this might be the case, but it didn't seem to make much of a difference. I seem to have a higher success rate than my coworkers loading the video.
Is there some reason to asynchronously load the youtube iframe script as in the examples, rather than loading a copy from my site?
That's all I can think of at this point... is there something I'm missing? Thanks.

There is a related thread which stated that the autoplay function is not allowed for most mobile devices.
From this documentation:
Due to this restriction, functions and parameters such as autoplay, playVideo(), loadVideoById() won't work in all mobile environments.
A simple workaround is to have a custom looks of the "play" button:
Have an overlay element with pointer-events: none;. pointer-events works on all modern mobile browsers or simply have the video container over the button with opacity: 0.
Hope this helps!

I ran into the almost the same exact problem. For us it was specific to cellular connections.
If the embed is larger than ~360px wide, the player attempts to serve up quality at "large" or higher to which AT&T and Verizon are throttling.
The result we see: player enters buffering state and cannot achieve playback.
Tests over T-Mobile work OK without issue.
Players embedded at or below 360px wide play OK on all networks at quality of "medium" or lower.

SoundCloud Autoplay in iFrame has Stopped Working

this page http://falsefeatures.com/aBookForPrivateReading/PlayHeavyWater should autoplay as I understand it.
the code looks like this:
<iframe width="100%" height="166" scrolling="no" frameborder="no" src="https://w.soundcloud.com/player/?url=https%3A//api.soundcloud.com/tracks/108973626&color=9900EE&auto_play=true&show_artwork=false"></iframe>
the audio does play if button clicked and I can change the button color and show or hide the artwork, as you'd expect. but no autoplay?
I've simplified for debug purposes but I have another page which I'd swear was autoplaying last week just fine. I have tried different browsers, computers, connections: what gives?
~Marqso

your link auto plays fine for me on Chrome.
It won't work on iOS devices though – there's a limitation on Apple's side that prevents media from auto playing in order to save on user's traffic.

This was caused by a regression on our part and was fixed last week.
https://twitter.com/flaneur/status/398439823234846720

HTML5 video playback on the iPad?

I'm developing a web app, and having trouble with HTML5 video for iPad. This code works fine every where else, not iPad. I just get a video frame, a black box. The HTML is generated in javascript, it is not hardcoded per se.
<video preload="true" src="places/video.mp4" class="c1" id="it" height="480" width="385" controls="">
</video>
Anyone know what could be wrong? (Videos are encoded using handbrake CLI and ffmpeg2theora as specified in Dive Into HTML5).
I think the issue is that it isn't http://serverlocation/places/video.ext. How would I alter it to look like that (with no guarantee that I know server location.) Part of me doubts this because images are served without the http:// and they work fine.

I think I know the problem. iPad chokes when presented with multiple <source> tags. What you can do (to do it simply) is use jQuery to add/remove objects.
HTML:
<div id="movie-wrapper">
<div id="webkit-wrapper">
<video width="480" height="360" controls="controls" src="places/video.mp4"></video>
</div>
<div id="other-wrapper">
<!-- Do your video in a new wrapper for all others -->
</div>
</div>
JS:
$(document).ready( function(){
if($.browser.webkit) {
$('#other-wrapper').remove();
} else {
$('#webkit-wrapper').remove();
}
});
Ideally, you're going to have a conditional for every major browser since you need at least three types of video for complete compatibility. But something like this should resolve the iPad webkit choke.
Edit
Rereading your comment, I want to make sure of something – that you have controls="controls" on the video element as above. From everything I've read, iPad requires that to enable playback. Otherwise, you get... a black screen.
And you might also look into whether there's an encoding problem, per HTML5 Video "Black Screen" on iPad
Edit
Other considerations:
Webserver may not be reporting the filetype properly (you can check this in the error console if it transfers with a warning about type)
If a poster is loading, try directly accessing the link to the mp4 video (see if quicktime plays it in the browser).
Other than that, I have no idea – there's going to continue to be miscommunication of facts unless you post a link to your page with the non-working example.