无法在 tizen 模拟器中的画布上加载视频答案

【问题标题】：Can't load video on canvas in tizen emulator无法在 tizen 模拟器中的画布上加载视频
【发布时间】：2018-08-23 13:32:56
【问题描述】：

我正在创建 tizen tv 应用程序。 我要吐视频

下面的代码在模拟器上运行良好，但是当我在模拟器中运行时不显示视频。

有没有办法在模拟器中显示。

我测试了所有代码和谷歌搜索但没有得到结果。

我搜索了tizen社区和三星问答。没有与我的问题相关的答案。

提前谢谢你

var video = $('#source')[0]; //variable to tie to our source

//create an array to store our canvases
// var splitCanvas = [$('#c1')[0], $('#c2')[0], $('#c3')[0], $('#c4')[0]];
var splitCanvas = [$('#c1')[0], $('#c2')[0]];


//start the function once the video starts playing
video.addEventListener('playing', function () {

  //create some variables for readability
  //halving the width and height results in 4 quadrants
  var w = video.videoWidth / 2;
  var h = video.videoHeight;

  //create a canvas context so we can manipulate the images
  var context = [];
  for (var x = 0; x < splitCanvas.length; x++) {
    //set the canvas dimensions to the native size of the video
    splitCanvas[x].width = w;
    splitCanvas[x].height = h;
    context.push(splitCanvas[x].getContext('2d')); //create the context variables
  };

  console.log('drawing');
  //Draw the 4 quadrants from the source video every 33 ms (approx 30 FPS)
  setInterval(function () {
    //context.drawImage(img,sx,sy,swidth,sheight,x,y,width,height);
    //Upper left
    context[0].drawImage(video,
      0, 0, //x, y start clipping
      w, h, //x, y  clipping width
      0, 0, //x, y placement
      w, h); //width, height of placement
    //Upper right
    context[1].drawImage(video,
      w, 0, //x, y start clipping
      w, h, //x, y clipping width
      0, 0, //x, y placement
      w, h); //width, height of placement
    // //Lower left
    // context[2].drawImage(video,
    //   0, h, //x, y start clipping
    //   w, h, //x, y stop clipping
    //   0, 0, //x, y placement
    //   w, h); //width, height of placement

    // //Lower right
    // context[3].drawImage(video,
    //   w, h, //x, y start clipping
    //   w, h, //x, y  clipping width
    //   0, 0, //x, y placement
    //   w, h); //width, height of placement
  }, 33);
});

<!DOCTYPE html>
<html>

<head>
  <meta charset="utf-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0">
  <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
</head>
<style>
  body {
    font: white
  }
</style>

<body>
 
    <!-- <video width="820" height="240" controls>
          <source src="https://www.quirksmode.org/html5/videos/big_buck_bunny.ogv">
          
        </video> -->
    <video id="source" src="https://www.quirksmode.org/html5/videos/big_buck_bunny.ogv" autoplay muted controls></video>
  <hr>
  <canvas id="c1"></canvas>
  <canvas id="c2"></canvas>
  <canvas id="c3"></canvas>
  <canvas id="c4"></canvas>
  </div>

  <script src="js/main.js"></script>
</body>

</html>

【问题讨论】：

标签： tizen samsung-smart-tv tizen-web-app tizen-emulator

【解决方案1】：

我们尝试在模拟器上运行 HTML 视频，但它不起作用，至少在 b2b 图像上不起作用。它要么

根本不显示视频
显示一帧然后变黑
使模拟器完全崩溃

我们就此询问了三星，他们回答说不推荐使用模拟器，我们应该使用真机。

您的体验与我们的非常吻合。在我个人看来，您无法在模拟器上可靠地测试 HTML/AVPlay 视频稳定性。

【讨论】：

扩展：有时视频会显示一个或两个播放列表周期，然后变黑并停止响应，即它们既不会运行，也不会触发任何事件处理程序。除了“某些功能在模拟器上不可用”之外，我们没有确定发生某些行为的确切情况，也没有听到 SAMSUNG 的解决方案/响应。