带键盘控制的视频播放器

Question

我正在尝试构建一个带有键盘控件的视频播放器。有人可以帮助我使用倒带功能吗我希望视频在我向左按下时倒带这是到目前为止的代码。播放和暂停按钮有效

我收到一条错误消息 Cannot read 属性 '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);

}

Answer 1

设置 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 视频标签，而应使用 "Broadcast Video" 对象，其完整详细信息可在 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 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.");
  }

}

可以调用“fastForward”、“rewind”、“play[=69=”等函数]", "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 插件作为其中的一部分 :-)

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

更新您可以在此网络文档中找到广播视频对象的完整方法和属性文档：

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

带键盘控制的视频播放器

video player with keyboard controls

html

javascript

keyboard

hbbtv