带键盘控制的视频播放器

时间:2018-12-06 22:13:31

标签: javascript html keyboard hbbtv

我正在尝试使用键盘控件构建视频播放器。 某些机构可以帮助我重绕功能吗 我想在向左按时倒带视频 到目前为止,这是代码。播放和暂停按钮有效

我收到一条错误消息,告知无法读取null的属性“ currentTime”

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);

}

1 个答案:

答案 0 :(得分:0)

在所有浏览器中设置currentTime仍不能正常工作,规格文档位于此处:

https://www.w3.org/TR/2011/WD-html5-20110113/video.html#dom-media-currenttime

但是从本质上讲,可以归结为这样一个事实:在尝试将其设置为EG之前,您几乎应该总是暂停视频:

let myVideo = document.getElementById("video"); 
myVideo.pause(); 
myVideo.currentTime = 0;

但是,控制视频中搜索的一种更好的方法是使用“ playbackRate”属性。

通常将其设置为1.0,这表示正常速度,但是将其设置为负值将在视觉上以该速度向后播放视频,负值越大,视觉倒带速度越快。

同样,大于1.0的正数将以不同的速度向前播放视频。

但是,我将在这里为您提供一些有关在符合HbbTV的应用程序中播放视频的建议。

通常,在HbbTV应用程序中,您不应使用HTML5视频标签,而应使用“广播视频”对象,有关该对象的完整详细信息,请参见HbbTV规范第6.2.2.6和9.7节。可以从以下位置下载:

http://www.hbbtv.org/wp-content/uploads/2015/07/HbbTV-SPEC20-00023-001-HbbTV_2.0.1_specification_for_publication_clean.pdf

如果您确实必须使用标准的HTML5视频标签,那么规范的9.6节将告诉您您需要了解的内容,但是请注意,它很复杂且混乱。

使用标准的广播视频对象很容易公平地说,您需要在HTML中定义一个与OIPF兼容的视频对象,如下所示。

<object id="video" type="video/broadcast" ></object>

然后,您可以使用我为在自己的应用中使用而编写的以下JS函数非常简单地控制它。

function bindBroacastVideo() {
  try {
    var video = document.getElementById("video");
    video.type = "video/broadcast";
    video.bindToCurrentChannel();
  }
  catch (err) {
    console.log("Broadcast Video failed to bind.");
  }
}

function stopBroadcastVideo() {
  try {
    document.getElementById("video").stop();
  }
  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 failed to stop.");
  }

}

您可以调用“ 快进”,“ 快退”,“ 播放”,“ 停止“” goFullScreen “,依此类推,我不确定是否在上面链接的规格文档中描述了完整套件,因为它看起来有点小(如果不能)找到方法列表,然后可以从以下位置下载其他卷和规格文档:

https://www.hbbtv.org/resource-library/specifications/

我也一直在查看HbbTV规范的ETSI版本,并在以下网址找到了A.2.4.7中的方法列表:

https://www.etsi.org/deliver/etsi_TS/102700_102799/102796/01.04.01_60/ts_102796v010401p.pdf

我将在以下项目中上传视频播放器HbbTV应用程序:

https://github.com/shawty/MsdnChannel9VideoLister

但是还没几个星期,我就完成了该部分并上传了,但是现在,JSON数据和Kodi插件就已经存在了:-)

如果您关注该项目,则在我上传或更改任何内容时都会收到通知。

更新 您可以在以下Web文档中找到广播视频对象的完整方法和属性文档:

https://www.oipf.tv/web-spec/volume5.html