Question

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

以下代码可与模拟器正常工作，但当我在模拟器中运行时，不显示视频。

在模拟器中有什么显示方式。

我已经测试了所有代码和google搜索，但未得到结果。

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

Answer 1

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

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

我们向三星询问了此问题，他们回答说不建议使用仿真器，我们应该使用真实的设备。

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

无法在Tizen仿真器中的画布上加载视频

1 个答案: