Question

我的应用程序在Chrome中运行良好，但在IE / EDGE中，画布不显示视频。

当我使用加密视频作为源时，这开始发生，当我使用开源视频时画布显示视频。我找不到解决方案，主要是因为IE / EDGE在开发人员工具控制台中没有显示错误。

IE / EDGE有一些政策不允许绘制加密视频吗？

将来我会从html中删除视频元素，只在javascript中创建并在画布上写一些文字作为水印。

<canvas runat="server" id="canvas1"></canvas>
<video 
    id="video1" 
    runat="server" 
    class="azuremediaplayer amp-default-skin amp-big-play-centered" 
    controls 
    poster="">
</video>

<script>
    var videoElement = document.getElementById('<%=video1.ClientID%>');
    videoElement.setAttribute('webkit-playsinline', 'true');
    videoElement.width = '1280';
    videoElement.height = '720';
    var x, y, min, tempo = 0;
    var nroRender = 201;
    var myPlayer = amp(videoElement);
    myPlayer.src([{
        src: '<URL VIDEO>',
        protectionInfo: [
        {
            type: 'Widevine',
            authenticationToken: 'Bearer=<TOKEN>'
        }, {
            type: 'PlayReady',
            authenticationToken: 'Bearer=<TOKEN>'
        }]
    }]);

    var canvasElement = document.getElementById('<%=canvas1.ClientID%>');
    canvasElement.width = '1280';
    canvasElement.height = '720';
    var ctx = canvasElement.getContext('2d');

    function desenha() {
        ctx.clearRect(0, 0, canvasElement.width, canvasElement.height);
        ctx.drawImage($('#video1 video')[0], 0, 0, canvasElement.width, canvasElement.height);
    }

    function loop() {
        desenha();
        setTimeout(loop, 1000 / 60);
    }

    loop();
</script>

如果您有什么问题需要了解问题，请在Chrome中运行，然后在IE中运行。在Chrome画布中显示为视频，在IE画布中显示为黑色。

https://github.com/tobiasrighi/video-canvas/blob/master/WebForm1.aspx

中的完整代码

Answer 1

由于视频受DRM保护，因此设计IE / Edge阻止了捕获帧的能力 - 它实际上不是错误，而是在媒体管道中降低了。看起来Chrome目前与Widevine的实施并没有阻止帧，虽然这可能在不久的将来发生，这取决于谷歌未来的设计考虑因素。

当源是IE / EDGE上的加密令牌视频时，Canvas不会从azure媒体播放器中绘制图像

1 个答案: