时间戳

首页 > 解决方案 > 当源视频可见时，带有视频的画布drawImage全屏不起作用

javascript - 当源视频可见时，带有视频的画布drawImage全屏不起作用

问题描述

我目前正在通过在画布上绘制视频的某些部分来显示视频的某些部分，同时将视频的主要部分显示为视频标签。最近我遇到了一个奇怪的情况，画布部分在旧手机（galaxy 7）上进入全屏模式时停止绘制。它在最近的手机和 PC 上运行良好。

所以，我摆弄了一下，发现如果视频可见，drawImage 将停止以全屏模式绘制。

https://jsfiddle.net/2c8udb7j/1/

https://jsfiddle.net/2c8udb7j/2/

两者相同，只是第二个有 line video.style.display = "none"。其他一切都是一样的。您可以通过单击“播放”按钮然后单击“全屏”按钮进行检查。

任何人都遇到过这个问题或知道它或有解决方案吗？

小提琴代码

html

<head>
  <meta charset="UTF-8">
</head>
<body>
  <script type="text/javascript" src="https://cdn.jsdelivr.net/hls.js/latest/hls.min.js"></script>
  <script src="MultiviewCore.js"></script>
  <button onclick='video.play();'>play</button>
  <button onclick='video.pause();'>pause</button>
  <button onclick='document.body.requestFullscreen();'>fullscreen</button>
  <div id='container'></div>
</body>

脚本

var container = document.getElementById('container')
var myRange = document.getElementById('myRange')
var video = document.createElement('video')
video.setAttribute("playsinline", "")
video.src = "http://commondatastorage.googleapis.com/gtv-videos-bucket/sample/BigBuckBunny.mp4"
var canvas = document.createElement('canvas')
var ctx = canvas.getContext('2d')
canvas.width = 512
canvas.height = 384
canvas.style.width = '512px'
canvas.style.height = '384px'
video.style.width = '512px'
video.style.height = '384px'
video.style.display = "none" // the only difference

function updateCanvas() {
  ctx.drawImage(video,
                0,
                0,
                video.videoWidth,
                video.videoHeight,
                0,
                0,
                canvas.width,
                canvas.height);
  window.requestAnimationFrame(updateCanvas)
}

document.body.appendChild(canvas)
document.body.appendChild(video)

updateCanvas()

编辑： 刚刚意识到我只用 chrome 测试这个。用galaxy 7的基本互联网浏览器试了一下，全屏drawImage效果很好。也许是铬或铬的问题？

标签： javascriptgoogle-chromehtml5-canvashtml5-video

解决方案

推荐阅读