如何将上下文菜单嵌入 HTML5 视频播放器？答案

【问题标题】：How do I embed a context menu into an HTML5 video player?如何将上下文菜单嵌入 HTML5 视频播放器？
【发布时间】：2014-08-02 15:56:10
【问题描述】：

我目前正在摆弄一个 HTML5 视频播放器 video.js，我想将这个上下文菜单 ContextJS 添加到其中。我是新手，我得到的答案越多，我将不胜感激。

提前谢谢你。

【问题讨论】：

标签： javascript html contextmenu video.js

【解决方案1】：

通过简要查看 ContextJS 文档，您要做的第一件事就是初始化它。

// these are all the defaults
context.init({
    fadeSpeed: 100,
    filter: null,
    above: 'auto',
    preventDoubleContext: true,
    compress: false
});

现在您可以使用context.attach(selector, menuObjects 启用不同项目的上下文菜单。

似乎video.js 将video-js 类应用于它制作的所有视频播放器容器。因此，您可以通过以下方式为屏幕上的每个视频添加上下文菜单：

context.attach('.video-js', [
    {text: 'play', action: function(){ /* code */ }},
    {text: 'help', href: '/help.html'}
]);

【讨论】：

感激不尽。我还是有点问题。你把上面的两段代码放在哪里了？
放置它们的典型位置是在<body> 底部的<script> 标记内。确保它们出现在 video.js 和 ContextJS 脚本之后。
我在 HTML 文件中的 </body> 标记之前输入这些行。 <script src="context.js"></script> script src="video.js"></script> <script> ontext.init({ fadeSpeed: 100, filter: null, above: 'auto', preventDoubleContext: true, compress: false }); </script> <script> context.attach('.video-js', [ {text: 'play', action: function(){ /* code */ }}, {text: 'help', href: '/help.html'} ]); </script>
不要忘记context.js 需要 jQuery 以及特殊的样式表才能工作。 jQuery应该是第一个脚本标签，样式表应该放在<head>标签中。
如果仍然无法正常工作，请在开发者控制台中显示任何错误时报告。