javascript - 用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;
    }
}; 

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

Answer 1

HTML：

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

每个函数中的 Javascript：

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

使用 CSS 将元素放置在您想要的任何位置和样式，包括在视频顶部。不确定特定用例的布局，但您可以调整 z-index 和堆栈顺序以将 div 放置在与视频相关的任何位置。

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