CODEWITHSUNDEEP
javascriptjqueryvideo.js
md1hunox
md1hunox

Reputation: 3955

how to change content of bigPlayButton in video js?

I'm showing the big play button after my video has ended. The content property of big play button is \e001. I want replace the content with my own custom icon. I want to use these font-awesome icons so that I could use the replay icon. Is there a way to accomplish this by using a the ended event in javascript/jquery?

Upvotes: 0

Views: 3719

Answers (2)

Cameron Tangney
Cameron Tangney

Reputation: 678

user904861's answer seems mostly correct to me, except:

  1. you may need to show the big play button upon 'ended' unless your version of videojs is already doing that.
  2. i don't think the replay icon is included in the videojs compiled font, so you'll need to include FontAwesome and specify the font-family in your class.

So you'll need to include

<link href="//netdna.bootstrapcdn.com/font-awesome/3.2.1/css/font-awesome.css" rel="stylesheet">

And then do something like:

myPlayer.on("ended", function() {
  myPlayer.bigPlayButton.show()
  $(".vjs-big-play-button:before").css("content", "\f01e");
  $(".vjs-big-play-button:before").css("font-family", "FontAwesome");
});

See a working example at: http://jsbin.com/uqukot/10/edit

Upvotes: 2

sk904861
sk904861

Reputation: 1277

Look up the unicode of the Font Awesome icon on http://fortawesome.github.io/Font-Awesome/cheatsheet/.

Then you can override the play button on the ended event:

myPlayer.on("ended", function() {
  $(".vjs-big-play-button:before").css("content", "\f01e");
});

Upvotes: 1

Related Questions