在javascript中显示视频中的信息

Question

我用javascript制作了一个视频播放器，里面有不同的按钮。现在，我想向我的javascript添加一个对象，它将提供有关视频如何播放的信息。例如，如果它正在播放，如果它是暂停的，或者如果它正在以慢动作播放。

我的代码如下所示：

var doThings = function (n) { 'use strict';

    if (n === 1) {
        document.getElementById('video').play();
    }

    if (n === 2) {
        document.getElementById('video').pause();
    }
};
var volume = function (n) { 'use strict';

    if (n === 1) {
        document.getElementById('video').muted = true;
    }

    if (n === 2) {
        document.getElementById('video').muted = false;
    }
};
var fullscreen = function() { 'use strict'; if (video.requestFullscreen) { video.requestFullscreen();

    } else if (video.webkitRequestFullscreen) {
        video.webkitRequestFullscreen();
    }
};
var slowmotion = function (n) { 'use strict';

    if (n === 1) {
        document.getElementById('video').playbackRate = 0.5;
    }
};
var normalspeed = function(n) { 'use strict';

    if (n === 1) {
        document.getElementById('video').playbackRate = 1;
    }
}; 

我想添加一个对象，它将指示当前正在使用mediaplayer的哪个功能。我可以只使用console.log()，但我希望在播放电影的窗口中显示信息。

Answer 1

HTML：

<div id="Display"></div>

每个函数中的Javascript：

document.getElementById("Display").innerHTML("Function Being Used");

使用CSS将元素放置在所需位置并设置其样式，包括在视频顶部。不确定特定用例的布局，但您可以调整z索引和堆栈顺序，以将div定位到与您的视频相关的任何位置。

可能无法在全屏模式下工作。