Is there a CE-HTML based tool for playing video on Smart TV?

StackOverflow https://stackoverflow.com/questions/22166780

  •  31-05-2023
  •  | 
  •  

Question

I'm looking for a video player tool(like jwplayer) that I'm going to use in CE-HTML pages. The developers who works with Smart tv applications commonly uses the following simple and basic codes in playing videos

<?xml version="1.0" encoding="UTF-8"?>    
<!DOCTYPE html PUBLIC    
"-//W3C//DTD XHTML 1.0 Transitional//EN"    
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">    
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">    
<head>   
<meta http-equiv="content-type" content="application/ce-html+xml; charset=UTF-8"/>    
<title>Basic CE-HTML - Basic media object</title>    
<script type="text/javascript">    
<![CDATA[    
  function handlePlayButtons(e)    
  {    
  switch (e.keyCode)    
  {    
     case VK_PLAY:   
        video.play(1);    
        break;    
     case VK_STOP:    
        video.stop();    
        break;    
     case VK_PAUSE:    
        video.play(0);    
        break;   
  }   
  }             
  // check the current playstate of the mediaobject    
  function checkPlayState()    
  {    
  switch (video.playState)    
  {    
    case 5: // finished    
       endOfFile();    
           break;    
     case 0: // stopped    
     case 6: // error    
     case 1: // playing    
     case 2: // paused    
     case 3: // connecting    
     case 4: // buffering    
     default:    
       // do nothing    
        break;    
  }
  }             
  // called when the end of file is reached    
  function endOfFile()    
   {    
     // repeat    
     video.play(1);    
   }              
   document.onkeydown=handlePlayButtons    
]]>    
</script>    
<![CDATA[    
The video is started using the play button.    
]]>    
</head>    
<body style="margin:0px;overflow:hidden;" onload="video.data='/click.mp4';video.play(1); video.onPlayStateChange=checkPlayState;">

<div id="mediaobject" style="position:absolute;left:0px;top:0px; width:640px;height:480px;">             
</div>    
</body>    
</html>

Is there a CE-HTML based tool for playing video on Smart TV ?

Was it helpful?

Solution

Sure you can use JWPplayer! The added bonus with JWPlayer is that if you buy the Pro version you can disable right click inside the video area, which could be useful if you make a SmartTV app which includes mouse integration and it breaks on an unaffiliated pop up on screen.

  1. Register for an API account on Jwplayer website
  2. Get the JS
  3. Place the JS in the folder structure of your app. Possibly in the same folder of your main.js file
  4. Create a div in your index.html named videoPlayerBox, the player will be loaded in this div.

  5. Initialize the player by calling this function:

    function displayVideoPlayer(url) {
jwplayer('videoPlayerBox').setup({
    file: url,
    width: '960',
    height: '540',
    events:{
    onComplete: function() {
        jwplayer().playNextVideo();
        }
    }
});

  6. Then to play, stop pause the player you can simply do: jwplayer.stop(), jwplayer.play() and so on...

Licensed under: CC-BY-SA with attribution
Not affiliated with StackOverflow
scroll top