This topic describes how your application can play video content using the HTML5 video element.
video
The HTML5 video element is a standard way to embed video content in Web applications. You can use the video element to stream video files on a Samsung Smart TV. The video element inherits all the properties and methods of the HTMLMediaElement interface.
Samsung TVs support a variety of standard video formats. For more information on the supported formats, see the Media Specifications.
To create a video player using HTML5:
Create a video element, and add attributes and properties. You can create the element in HTML or in JavaScript:
<body> <video id='video' width='700' height='400' poster='yourPosterURI' src='yourVideoURI' controls style='background:black'> </video> </body>
autoplay
controls
height
loop
muted
poster
preload
src
width
var videoElement = document.createElement('video'); videoElement.id = 'video'; videoElement.width = '700'; videoElement.height = '400'; videoElement.poster = 'yourPosterURI'; videoElement.src = 'yourVideoURI' ; videoElement.controls = true; videoElement.style.background='black'; videoElement.load(); document.body.appendChild(videoElement);
audioTracks
buffered
currentTime
duration
ended
paused
volume
Define event listeners. For more information on the available events, see Media events.
var videoElement = document.getElementById('video'); videoElement.addEventListener('loadeddata', function() { console.log('Video loaded.'); }); videoElement.addEventListener('timeupdate', function() { console.log('Current time: ' + videoElement.currentTime); }); videoElement.addEventListener('seeked', function() { console.log('Seek operation completed.'); videoElement.play(); }); videoElement.addEventListener('stalled', function() { console.log('Video stalled.'); }); videoElement.addEventListener('ended', function() { console.log('Video ended.'); });
Control the playback:
addTextTrack()
canPlayType()
load()
source
pause()
play()
var videoElement = document.getElementById('video'); /* Move 10 seconds forward */ var seekTime = videoElement.currentTime + 10; if (seekTime >= 0 && seekTime <= videoElement.duration) { videoElement.currentTime = seekTime; } /* Move 10 seconds back */ var seekTime = videoElement.currentTime - 10; if (seekTime >= 0 && seekTime <= videoElement.duration) { videoElement.currentTime = seekTime; } /* Move currentTime to 30 seconds */ videoElement.currentTime = 30;
playbackRate
var videoElement = document.getElementById('video'); /* Set to half speed */ var speed = 0.5; videoElement.playbackRate = speed; /* Set to double speed */ var speed = 2.0; videoElement.playbackRate = speed;
To add multiple videos to a video player, for playing in sequence:
Create a source element for each video file you want to add.
<video id='video' width='700' height='400'> <source class='active' src='yourVideoURI_1' ></source> <source src='yourVideoURI_2' ></source> </video>
type
When the first video has finished playing, start playback for the next video:
var videoElement = document.getElementById('video'); videoElement.addEventListener('ended', function(e) { var activeSource = document.querySelector('#video source.active'); var nextSource = document.querySelector('#video source.active+source') || document.querySelector('#video source:first-child'); // deactivate current source, and activate the next one activeSource.className = ''; nextSource.className = 'active'; // update the video source and start playback videoElement.src = nextSource.src; videoElement.play(); })
You can use the track element to add text captions or subtitles to the video. The caption or subtitle track must be in WebVTT (".vtt") format.
track
kind
label
srclang
default
<video id='video'> <source src='yourVideoURI' type='yourVideoType' ></source> <track label='English' kind='subtitles' srclang='en' src='yourSubtitleURI_en' default></track> <track label='Deutsch' kind='subtitles' srclang='de' src='yourSubtitleURI_de'></track> </video>
var videoElement = document.getElementById('video'); // show English subtitles videoElement.textTracks[0].mode = 'showing'; videoElement.textTracks[1].mode = 'hidden'; // show Deutsch subtitles videoElement.textTracks[0].mode = 'hidden'; videoElement.textTracks[1].mode = 'showing';
color
opacity
font
::cue { color:#ccc; }
The error property returns an instance of the MediaError interface, which returns a numerical code value representing the error state of the media element.
error
Table 1. Media error states
var videoElement = document.getElementById('video'); videoElement.addEventListener('error', function() { /* Video playback failed: show an error message */ switch (videoElement.error.code) { case 1: // 'MEDIA_ERR_ABORTED : 1, Media data download is stopped by the user' break; case 2: // 'MEDIA_ERR_NETWORK : 2, Download stopped due to network error' break; case 3: // 'MEDIA_ERR_DECODE : 3, Media data decoding failure' break; case 4: // 'MEDIA_ERR_SRC_NOT_SUPPORTED : 4, Format not supported' break; } }, false);