0

私はtizen tvアプリケーションを作成しています。 動画吐きたい

以下のコードはシミュレーターで正常に動作しますが、エミュレーターで実行するとビデオが表示されません。

エミュレータで表示する方法はありますか。

すべてのコードと Google 検索をテストしましたが、結果が得られませんでした。

Tizenコミュニティとsamsung Q&aで検索しました。私の問題に関連する回答はありません。

前もって感謝します

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