Question

我正在使用由新CDN提供的不同视频播放器而且我的一些用户感到不安，因为鼠标在不作为5秒后不会消失，并且他们无法点击任何地方暂停。我一直在使用播放器代码，并有一个可以暂停它的链接：

<a onclick="videoPlayer.pause()" href="#">pause</a>

但我不知道如何在播放器上进行叠加。它需要占据播放器的前90％而离开较低部分以进行视频控制，当然，如果它是全屏的话，它必须是不同的窗口。

我是否应该使用一个或一个透明的GIF在播放器上使用CSS来定位它？

以下是运行该代码的代码，抱歉，但它受到域名限制，因此您无法实际播放该视频。

<script language="JavaScript" type="text/javascript" src="http://admin.brightcove.com/js/BrightcoveExperiences.js"></script>
<object id="myExperience3619894642001" class="BrightcoveExperience">
  <param name="bgcolor" value="#FFFFFF" />
  <param name="width" value="720" />
  <param name="height" value="480" />
  <param name="playerID" value="3617955641001" />
  <param name="playerKey" value="AQ~~,AAADSjjR4TE~,zW9NS0ZIOkOMdyn7JfUbJFmsqynLvYD8" />
  <param name="isVid" value="true" />
  <param name="isUI" value="true" />
  <param name="dynamicStreaming" value="true" />
  <param name="includeAPI" value="true" />
  <param name="templateLoadHandler" value="onTemplateLoad" />
  <param name="templateReadyHandler" value="onTemplateReady" />
  <param name="@videoPlayer" value="3619894642001" />
</object>
<script type="text/javascript">brightcove.createExperiences();
</script>
 <script type="text/JavaScript">
var player,
APIModules,
videoPlayer;

function onTemplateLoad(experienceID){
player = brightcove.api.getExperience(experienceID);
APIModules = brightcove.api.modules.APIModules;
}

function onTemplateReady(evt){
videoPlayer = player.getModule(APIModules.VIDEO_PLAYER);
videoPlayer.play();
}
</script>

Answer 1

我不会使用透明的GIF。只需在播放器之前使用像<div>这样的空HTML元素，使用任何您想要的底部边距为负，这样视频播放器就会放在<div>后面。如果你的视频播放器是480像素宽，320像素高，这是一个例子。

<div
    style="width: 480px; height: 288px; margin-bottom: -288px;"
    onclick="videoPlayer.pause()"
></div>
<object id="myExperience3619894642001" class="BrightcoveExperience">
    <param name="bgcolor" value="#FFFFFF" />
    <param name="width" value="720" />
    <param name="height" value="480" />
    <param name="playerID" value="3617955641001" />
    <param name="playerKey" value="AQ~~,AAADSjjR4TE~,zW9NS0ZIOkOMdyn7JfUbJFmsqynLvYD8" />
    <param name="isVid" value="true" />
    <param name="isUI" value="true" />
    <param name="dynamicStreaming" value="true" />
    <param name="includeAPI" value="true" />
    <param name="templateLoadHandler" value="onTemplateLoad" />
    <param name="templateReadyHandler" value="onTemplateReady" />
    <param name="@videoPlayer" value="3619894642001" />
</object>

为onclick（）动作叠加JS视频播放器

1 个答案: