0

我正在创建 tizen 电视应用程序。 我想吐视频

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

有什么办法可以在模拟器中显示。

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

我搜索了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>

4

1 回答 1

2

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

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

我们向三星询问了这个问题，他们回答说不建议使用模拟器，我们应该使用真实设备。

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

于 2018-08-24T08:58:46.083 回答