HTML5 Video with Canvas transparency does not work in Safari

I’m trying to load a randomized video with alpha transparency using canvas on click, which is working in all browsers except Safari. For Safari, the audio is loading, however there is no video output. I tried removing the source tags as stated in https://www.experts-exchange.com/questions/28634434/HTML5-Video-Background-Not-Playing-on-Safari-or-IE11.html, however that did not seem to solve anything.

$(document).ready(function() {
	var outputCanvas = document.getElementById('outputSS'),
		output = outputCanvas.getContext('2d'),
		bufferCanvas = document.getElementById('bufferSS'),
		buffer = bufferCanvas.getContext('2d'),
		video = document.getElementById('videoSS'),
		width = outputCanvas.width,
		height = outputCanvas.height,
		interval;
				
		function processFrame() {
			buffer.drawImage(video, 0, 0);
			
			// this can be done without alphaData, except in Firefox which doesn't like it when image is bigger than the canvas
			var	image = buffer.getImageData(0, 0, width, height),
				imageData = image.data,
				alphaData = buffer.getImageData(0, height, width, height).data;

			
			for (var i = 3, len = imageData.length; i < len; i = i + 4) {
				imageData[i] = alphaData[i-1];
			}

			processFrame.crossOrigin = "anonymous";
			
			output.putImageData(image, 0, 0, 0, 0, width, height);
		}
		
		function randomColourVal() {
			return Math.floor( Math.random() * 2000 );
		}
		
		video.addEventListener('play', function() {
			clearInterval(interval);
			interval = setInterval(processFrame, 40)
		}, false);
			

	document.getElementById('buttonRedesign').onclick = function (){
		$( document ).ajaxSuccess(function( event, xhr, settings ) {
    		if ( settings.url.indexOf("/store/cart/mini_cart.jsp") >= 0) {
				var videos = [
				    [{type:'mp4', 'src':'/__ssobj/static/ellen_comp_2_ALPHA_Final2.mp4'}, {type:'webm', 'src':'/__ssobj/static/ellen_comp_2_ALPHA_Final2.webm'}, {type:'ogg', 'src':'/__ssobj/static/ellen_comp_2_ALPHA_Final2.ogv'}],
				    [{type:'mp4', 'src':'/__ssobj/static/ellen_comp_6_ALPHA_Final2.mp4'}, {type:'webm', 'src':'/__ssobj/static/ellen_comp_6_ALPHA_Final2.webm'}, {type:'ogg', 'src':'/__ssobj/static/ellen_comp_6_ALPHA_Final2.ogv'}],  
				    [{type:'mp4', 'src':'/__ssobj/static/ellen_comp_4_ALPHA_Final2.mp4'}, {type:'webm', 'src':'/__ssobj/static/ellen_comp_4_ALPHA_Final2.webm'}, {type:'ogg', 'src':'/__ssobj/static/ellen_comp_4_ALPHA_Final2.ogv'}],  
				    [{type:'mp4', 'src':'/__ssobj/static/ellen_comp_1_ALPHA_Final2.mp4'}, {type:'webm', 'src':'/__ssobj/static/ellen_comp_1_ALPHA_Final2.webm'}, {type:'ogg', 'src':'/__ssobj/static/ellen_comp_1_ALPHA_Final2.ogv'}],  
				    [{type:'mp4', 'src':'/__ssobj/static/ellen_comp_2_ALPHA_Final2.mp4'}, {type:'webm', 'src':'/__ssobj/static/ellen_comp_2_ALPHA_Final2.webm'}, {type:'ogg', 'src':'/__ssobj/static/ellen_comp_2_ALPHA_Final2.ogv'}],  
				    [{type:'mp4', 'src':'/__ssobj/static/ellen_comp_5_ALPHA_Final2.mp4'}, {type:'webm', 'src':'/__ssobj/static/ellen_comp_5_ALPHA_Final2.webm'}, {type:'ogg', 'src':'/__ssobj/static/ellen_comp_5_ALPHA_Final2.ogv'}],  
				];
				var number = Math.floor(Math.random()*videos.length);
			    $('#videoSS').find('source').each(function(index){ 
			          videoSrc = videos[number][index].src;
			          $(this).attr('src', videoSrc);
			          document.getElementById('videoSS').load();
			          document.getElementById('videoSS').play();
			    });
		 	}
		});
	};
	$(function(){
	    var video = $('#videoSS')[0];
	    video.addEventListener('ended', function(){
	        $('.videoCont').fadeOut();
	        $('.replayVideo').show();
	    })
		video.addEventListener('playing', function(){
	        $('.videoCont').fadeIn();
	        $('.replayVideo').hide();        
	    })

	});

	$('.replayVideo').click(function() {
		document.getElementById('videoSS').play();
	});

});
.videoCont {position: fixed;margin-left: -390px;z-index: 1000;bottom: 0px;display:none;width: 400px;display: block;}
.replayVideo {position: fixed;margin-left: -260px;z-index: 1001;bottom: 0px;display:none;cursor:pointer;text-align: center;}
.replayVideo img {width: 2rem;}
.replayVideo div {background: rgba(255, 255, 255, .8);display: block;padding: 15px;margin-bottom: 40px;}
#outputSS {width: 300px;height: 327px;display: inline-block;}
#bufferSS {display: none;}
<button id="buttonRedesign">Add</button>
Replay Video
REPLAY


Source: stackoverflow-javascript

Uploading Video via Youtube API Creates Multiple Videos

Simple question (I can share alot of specific code we’re using if necessary): We’ve created a PHP Youtube API integration (using the official google php library) which allows uploading of videos. When large videos are uploaded we generally get a bunch of small videos created on the youtube channel which all have empty data, then finally one successful video that contains the entire video.

What could cause this creation of duplicate (blank) video files which finish with one successful video being created? Has anyone else encountered this?


Source: stackoverflow-php