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

Question

我有一个videojs播放器。我想在视频结束时使用重播图标在控制栏中播放播放图标。 你可以看到像youtube播放器：

这是我的代码：

＆＃13;

＆＃13;

<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

});

});

＆＃13;

＆＃13;

＆＃13;

这是我的完整代码。您可以通过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类。你最终会得到一些看起来像的东西：

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