用javascript在视频中显示信息

我用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（），但我希望在播放电影的窗口中显示信息。

HTML:

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

使用CSS定位和样式元素，无论你想在哪里，包括在视频顶部。不确定特定用例的布局，但您可以调整z索引和堆栈顺序，以便将div定位到与视频相关的任何位置

---

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

您知道您可以将

使用strict

添加到整个范围。如何操作？你是什么意思？你可以使用模态、警报或任何你想象出来的东西。你的问题不清楚你到底想做什么。我想在你点击mediaplayer的一个按钮后弹出一个文本框，但仍然可以观看视频。在脚本顶部粘贴一次“使用严格”。不需要在每个函数中重复它。

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