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 play, forward, rewind & pause buttons</title>
	<script type="text/javascript">
		var videoPlayer;

		function init() {
			videoPlayer = document.getElementById("videoPlayer");
			document.addEventListener("keydown", handleKeyDown, true);

		};

		/*Function for Play & Pause Buttons*/

		function playPause() {
			var btnPlay = document.getElementById("btnPlay");
			if (videoPlayer.paused) {
				videoPlayer.play();
				btnPlay.textContent = "||";
			} else {
				videoPlayer.pause();
				btnPlay.textContent = ">";
			}
		}

		/*Function to Reload video from Beginning*/

		function reloadVideo() {
			videoPlayer.currentTime = 0;
		}

		/*Function to Forward & Rewind*/

		function playForward(param) {
			if((videoPlayer.currentTime+param) < video.duration) {
				videoPlayer.currentTime += param;
			}
		}

		function playRewind(param) {
			if((videoPlayer.currentTime-param) > 0) {
				videoPlayer.currentTime -= param;
			}
		}

		function handleKey(event,id){
			switch (event.keyCode){
				case VK_ENTER:
					switch(id) {
						case "btnReload":
							reloadVideo();
						break;
						case "btnRewind":
							playRewind(10);// Jumping 10 seconds backward in the stream
						break;
						case "btnPlay":
							playPause();
						break;
						case "btnForward":
							playForward(10);// Jumping 10 seconds forward in the stream
						break;
					}
				default:
				return;
				break;
			}
		}

		function handleKeyDown(e) {
			if(e.keyCode == VK_PLAY) {
				//VK_PLAY key is triggered;
				videoPlayer.play();
			}
			
			if(e.keyCode == VK_STOP) {
				//VK_STOP key is triggered, Since we dont have STOP in HTML5 use below code
				videoPlayer.currentTime=0;  // reset the time to zero
				videoPlayer.pause();			
			}

			if(e.keyCode == VK_PAUSE) {
				//VK_PAUSE key is  triggered";
				videoPlayer.pause();
			}

			if(e.keyCode == VK_FAST_FWD) {
				//"VK_FAST_FWD triggered";
				playForward(10);
			}

			if(e.keyCode == VK_REWIND) {
				//"VK_REWIND triggered";
				playRewind(10);// Jumping 10 seconds backward in the stream
			}
			if(e.keyCode == VK_PLAY_PAUSE) {
				
				playPause();// Check the play state and then Play/ Pause
			}
			
		}
	</script>
</head>
<body>
	<video id="videoPlayer">
		<source src="laugh-vid.mp4" type="video/mp4" />
	</video>

<!--Buttons for Video Player-->
	<div id="playerButtons">
		<button id="btnReload" onkeydown="handleKey(event,this.id);">[]</button>
		<button id="btnRewind" onkeydown="handleKey(event,this.id);"><<</button>
		<button id="btnPlay" onkeydown="handleKey(event,this.id);">></button>
		<button id="btnForward" onkeydown="handleKey(event,this.id);">>></button>
	</div>
</body>
</html>


Important Recomendation:



  • 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