I am trying to build a video player with keyboard controls. Can some body help me with the rewind feature I want the video to rewind when I press left This is the code so far. The play and pause button works
I got an error telling Cannot read property 'currentTime' of null
var intervalForward;
var intervalRewind;
function handleKeyCode(kc) {
switch(kc) {
case VK_LEFT:
keyFunction("LEFT");
return true;
break;
case VK_PLAY:
keyFunction("PLAY");
return true;
break;
case VK_PAUSE:
keyFunction("PAUSE");
return true;
break;
case VK_REWIND:
keyFunction("REWIND");
return true;
break;
default:
return false;
}
}
function keyFunction(e) {
switch(e) {
case "OK":
document.getElementById("myvideo").play();
break;
case "BACK":
document.getElementById("myvideo").pause();
break;
case "LEFT":
document.getElementById(myvideo).currentTime == 0;
break;
}
}
function init() {
var script2 = document.createElement('script');
script2.setAttribute('src', 'keycodes.js');
document.body.appendChild(script2);
document.addEventListener("keydown", function(e) {
if (handleKeyCode(e.keyCode))
e.preventDefault();
}, false);
}
Setting the currentTime doesn't yet work the same in all browsers, the spec documentation is here:
https://www.w3.org/TR/2011/WD-html5-20110113/video.html#dom-media-currenttime
But essentially it boils down to the fact, that you should nearly always pause the video before you try to set it EG:
let myVideo = document.getElementById("video");
myVideo.pause();
myVideo.currentTime = 0;
A better way of controlling the seeking in the video however is to use the "playbackRate" property.
Normally, this is set to a value of 1.0 which means normal speed, however setting it to a negative value will visually play the video backwards at that speed, the higher the negative, the faster the visual rewind.
Like wise, positive numbers greater than 1.0 play the video forward at different speeds.
However, I'm going to give you some extra advice here on playing video in a HbbTV compliant application.
In general, in HbbTV apps, you should NOT use an HTML5 video tag, you should instead use the "Broadcast Video" object, the full details of which can be found in the HbbTV specification section 6.2.2.6 and 9.7 which you can download from:
If you really must use a standard HTML5 video tag, then section 9.6 of the spec tells you what you need to know, but be aware, it's complicated, and messy.
Using the standard broadcast video object is pretty easy to be fair, you need to define an OIPF compatible video object in your HTML, something like the following.
<object id="video" type="video/broadcast" ></object>
Then you can control it quite simply using the following JS functions I've written for use in my own apps.
function bindBroacastVideo() {
try {
var video = document.getElementById("video");
video.type = "video/broadcast";
video.bindToCurrentChannel();
}
catch (err) {
console.log("Broadcast Video object failed to bind to broadcast.");
}
}
function stopBroadcastVideo() {
try {
document.getElementById("video").stop();
document.getElementById("video").release();
}
catch (err) {
console.log("Broadcast Video failed to stop.");
}
}
function playFileOnBroadcastVideo(fileUrl)
{
if (!fileUrl) return;
try {
var video = document.getElementById("video");
video.type = "video/mp4";
video.data = fileUrl;
video.play();
}
catch (err) {
console.log("Broadcast Video object failed to play MP4.");
}
}
You can call functions such as "fastForward", "rewind", "play", "stop" "goFullScreen" and so on, I'm not sure if the full set is described in the spec document I've linked above, as it does seem a bit small, if you can't find the list of methods then you can download other volumes and spec documents from:
https://www.hbbtv.org/resource-library/specifications/
I've also just been looking in the ETSI versions of the HbbTV specs and found the list of methods in A.2.4.7 available at:
https://www.etsi.org/deliver/etsi_TS/102700_102799/102796/01.04.01_60/ts_102796v010401p.pdf
I'll be uploading a video player HbbTV app as part of the project I'm on doing at:
https://github.com/shawty/MsdnChannel9VideoLister
But it won't be for a few weeks yet, that I get that part finished and uploaded, right now however, the JSON data and a Kodi plugin are there as part of it :-)
If you follow the project, you'll get notified when I upload or change anything.
Update You can find the full method and properties documentation for the broadcast video object in this web doc: