视频 JS - 在视频结束后使用重播图标更改 ControlBar 中的播放图标

Question

我有一个videojs播放器。我想在视频结束时用重播图标更改控制栏中的播放图标。你可以像youtube player一样看到:

这是我的代码：

<script>
videojs("my_video_1").ready(function(){

var vid = this;
vid.on("ended", function(){
alert ("I want to change play icon in cotrolbar with replay icon");
 // i dont know to chage play icon when the video is finish

});

});

这是我的完整代码。你可以运行通过 jsbin: http://jsbin.com/fijefi/2/

谢谢

Answer 1

您甚至不需要 javascript 来执行此操作。您可以通过 CSS 更改播放图标。

在默认的 LESS 文件中，播放按钮有两种状态：

.vjs-default-skin .vjs-play-control:before {
  content: @play-icon;
}
.vjs-default-skin.vjs-playing .vjs-play-control:before {
  content: @pause-icon;
}

您只需要在视频结束时添加第三种状态。已经有一个 CSS class 了。您最终会得到如下所示的内容：

.vjs-default-skin.vjs-ended .vjs-play-control:before {
   content: "YOUR REPLY ICON";
 }

视频 JS - 在视频结束后使用重播图标更改 ControlBar 中的播放图标

Video JS - Change Play Icon in ControlBar with Replay Icon After Video End

video.js