I'm trying to create a thumbnail for the video using plyr - https://github.com/sampotts/plyr
I can get the blob as in the below codepen: https://codepen.io/suryaiiit/pen/LeZwgr
But when I try the same in the VF, it is giving error.
VisualForce Page
<apex:stylesheet value="{!URLFOR($Resource.slds, 'assets/styles/salesforce-lightning-design-system.css')}"/>
<apex:stylesheet value="{!URLFOR($Resource.Plyr, 'plyr.css')}"/>
<div class="container">
<video id="video" controls="" crossorigin="">
<!-- Video files -->
<source src="https://cdn.plyr.io/static/demo/View_From_A_Blue_Moon_Trailer-HD.mp4" type="video/mp4" />
<source src="https://cdn.plyr.io/static/demo/View_From_A_Blue_Moon_Trailer-HD.webm" type="video/webm" />
<!-- Fallback for browsers that don't support the <video> element -->
<a href="https://cdn.plyr.io/static/demo/View_From_A_Blue_Moon_Trailer-HD.mp4" download="">Download</a>
</video>
<div id="preview"></div>
<div class="actions">
<button type="button" class="btn" onclick="getThumb()">getThumb</button>
</div>
</div>
<script>
window.Player = {
instance: null,
Testing: false,
Options: { }
};
setTimeout(function() {
var instances = plyr.setup({
// Output to console
//debug: true
});
}, 2000);
function getThumb() {
console.log('getThumb')
var video = document.getElementById('video');
var w = video.videoWidth;//video.videoWidth * scaleFactor;
var h = video.videoHeight;//video.videoHeight * scaleFactor;
var canvas = document.createElement('canvas');
canvas.width = w;
canvas.height = h;
var ctx = canvas.getContext('2d');
ctx.drawImage(video, 0, 0, w, h);
document.getElementById("preview").appendChild(canvas);
var data = canvas.toDataURL("image/jpg");
console.log('canvas data: ', data);
}
</script>
<apex:includeScript value="{!URLFOR($Resource.Plyr, 'plyr.js')}" loadOnReady="true"/>
I get the below error:
thum:50 Uncaught DOMException: Failed to execute 'toDataURL' on 'HTMLCanvasElement': Tainted canvases may not be exported. at getThumb