CODEWITHSUNDEEP
tizensamsung-smart-tvtizen-web-apptizen-emulator
Hemant Patel
Hemant Patel

Reputation: 1

Can't load video on canvas in tizen emulator

I am creating tizen tv application. I want to spit video

Below code working fine with simulator but when i run in emulator not display video.

Is there any way to display in emulator.

I had testing all codes and google search but not getting result.

I searched on tizen community and samsung Q&a. There is not answer related to my issue.

Thank you in advance 

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>

Upvotes: 0

Views: 491

Answers (1)

Koenigsberg
Koenigsberg

Reputation: 1799

We tried running HTML video on the emulator and it doesn't work, at least not on the b2b images. It will either

  1. not display the video at all
  2. display one frame and then turn black
  3. crash the emulator entirely

We asked SAMSUNG about this, they responded that use of the emulator is not recommended and we should use a real device.

Your experience aligns well with ours. In my personal opinion you cannot test HTML/AVPlay video stability on the emulator reliably.

Upvotes: 2

Related Questions