Login

Sign Up

  • Account Information
  • Company Information
  • Contact














* Whale Eco Distribution Agreement

Leave empty when commercial agreements with individual device manufactures are required. Individual agreements overrule the default scope for app distribution.

Already have an account ?Click here to login

Forget Password

Video Playback

The embeddable browser comes with built-in support for the HTML5  <audio>  and <video> elements, allowing developers to include multimedia content in their applications without any need for plugin-based solutions.


At its simplest, this means that multimedia elements can be included in a TV Store application by simply using markup such as:

<video>
    <source src="/path/to/video.mp4" type="video/mp4">
</video>

<audio>
    <source src="/path/to/audio.mp3" type="audio/mp3">
</audio>


For more on the basics of HTML5  <audio>  and <video> , read Introduction to HTML5 video.

In contrast with desktop browsers — where multimedia decoding and playback is handled directly by the browser — the specifics of which codecs are supported on devices can vary considerably, as this depends on the underlying platform and integration work carried out by device manufacturers, as well as the specific version of the App Store that may be running on the device.


How to use Video and Audio tags



<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
   <head>
      <title> HTML5 video player with Media Controls </title>
      <style>
        button:hover,button:focus { background-color: yellow;}
		.container { margin: auto; width: 45%; border: 1px solid green; top: 50% ; padding : 1% }
		h1{ color: white; text-align: center; }
		#progress-bar { display: flex;width: 100%;height: 5px;position: relative;}
		#progress { width: 0%;height: 100%;background-color: red;}
		#duration{position: absolute;right: 0;margin-top: 2%;color: white;}
		#current-time{position: absolute;left: 0;margin-top: 2%;color: white;}
      </style>
      <script type="text/javascript">
         var videoPlayer,progressBar;
		
        function init() {
            videoPlayer = document.getElementById("videoPlayer");
			progressBar = document.getElementById("progress");
            document.addEventListener("keydown", handleKeyDown, true);
			videoPlayer.addEventListener("timeupdate", updateProgressBar);
         };
		// handle Progress bar  
		function updateProgressBar() {
			var currentTime = videoPlayer.currentTime;
			var duration = videoPlayer.duration;
			progressBar.style.width = (currentTime / duration) * 100 + "%";
		 
			document.getElementById("duration").textContent = "Duration : " + formatTime(duration) ;
			document.getElementById("current-time").textContent = " Current Time:" + formatTime(currentTime) ;
		 
		}
		// Format time in HH:MM:SS format
		function formatTime(time) {
			var hours = Math.floor(time / 3600);
			var minutes = Math.floor((time % 3600) / 60);
			var seconds = Math.floor(time % 60);

			// Adding leading zeros if necessary
			var formattedHours = hours < 10 ? "0" + hours : hours;
			var formattedMinutes = minutes < 10 ? "0" + minutes : minutes;
			var formattedSeconds = seconds < 10 ? "0" + seconds : seconds;

			return formattedHours + ":" + formattedMinutes + ":" + formattedSeconds;
		}
		
        // To handle Play/Pause
        function playPause() {
			if (videoPlayer.paused) {
				videoPlayer.play();
			} else {
				videoPlayer.pause();
			}
			document.getElementById("btnPlay").textContent = videoPlayer.paused ? "Play" : "Pause";
         }
         
        // To Reset the playback to beginning
        function reloadVideo() {
            videoPlayer.currentTime = 0;
         }
         
		// To handle Fast Forward
        function playForward() {
            if((videoPlayer.currentTime + 10) < videoPlayer.duration) {
                 videoPlayer.currentTime += 10;
				 updateProgressBar();
             }
         }
         
		// To handle Rewind
        function playRewind() {
            if((videoPlayer.currentTime - 10) > 0) {
                 videoPlayer.currentTime -= 10;
				 updateProgressBar();
             }
         }

		// Handle keyDown Event
        function handleKeyDown(event) {
            switch (event.keyCode) {
                case VK_ENTER:
                    switch (document.activeElement.id) {
                        case "btnReload":
                             reloadVideo();
                             break;
                        case "btnRewind":
                             playRewind();
                             break;
                        case "btnPlay":
                             playPause();
                             break;
                        case "btnForward":
                             playForward();
                             break;
                     }
                     break;
                case VK_PLAY:
                     videoPlayer.play();
			document.getElementById("btnPlay").textContent = videoPlayer.paused ? "Play" : "Pause";
                     break;
                case VK_PAUSE:
                     videoPlayer.pause();
			document.getElementById("btnPlay").textContent = videoPlayer.paused ? "Play" : "Pause";
                     break;					 
                case VK_PLAY_PAUSE:
                     playPause();
                     break;
                case VK_FAST_FWD:
                     playForward();
                     break;
                case VK_REWIND:
                     playRewind();
                     break;					 					 
                case VK_STOP:
                     videoPlayer.currentTime = 0;
                     videoPlayer.pause();
                     break;
		case VK_DOWN:
		    document.getElementById('btnReload').focus();
		    break;
             }
         }
      </script>
   </head>
   <body onload="init()">
    <h1>HTML5 video player with Media Controls</h1>
   <div class="container">  
      <video  style="width:100%" id="videoPlayer">
         <source src="BigBuckBunny_320x180.mp4" type="video/mp4" />
      </video>
      
	<!-- Progress Bar -->
	
	<div id="progress-bar">		
		<span id="current-time"></span>
		<div id="progress"></div>
		<span id="duration"></span>
	</div>
   
    <!-- On-Screen Buttons for Video Player -->
    
      <div id="playerButtons" style="padding: 6%;">
        <button id="btnReload">Restart Video</button>
        <button id="btnRewind"> Rewind by -10sec </button>
        <button id="btnPlay"> Play/Pause</button>
        <button id="btnForward"> Fast Forward by +10sec </button>
      </div>
	</div>
   </body>
</html>


Important Recomendation:



  • App should handle PlayPause (single key) key from remote control . Refer the above code to handle the same.

  • App should show the proper messages if the content is Geo-Blocked, Playback fails or format not supported

  • When audio or video is paused, the app should show a sign that indicates this (at least temporarily)

  • The App should show a loading UI when it is loading (start-up, video/audio playback start)

  • The app should close the full screen mode when the remote control Back key is pressed during full screen video playback.
    (In case the app consists of showing a full screen video playback only, this requirement is not applicable. )

  • When playing media, there are no hiccup, block pattern (macro blocks), freezing, stuttering and audio/video out of sync

  • When a video finishes playback, the app should return to a visibly usable state


Interested in becoming an Zeasn partner?
We’d love to hear from you.
Copyright © 2011 -2023 Beijing Zeasn Information Tech CO., Ltd. All Rights Reserved