CODEWITHSUNDEEP
javascripthtmlvideohtml5-videovideo.js
The Hung
The Hung

Reputation: 309

Add text to play button in Video.js

I want to add text to play button in videojs instead of icon. I have tried so many things and search alot when I am applying i found no result, I think I have some mistake in my code.

I have setup my player on videojs successfully.

This my code which I am trying to add text to button.

<section class="video-section parallax-section">
    <div class="video-wrapper">
        <video id="intro-video" class="video-js vjs-default-skin" controls preload="auto" poster="images/video-bg.jpg" data-setup='{"example_option" :true}'>
            <source src="sample.mp4" type='video/mp4' />
        </video>
    </div>  <!-- end video-wrapper -->

    <div class="video-content">
        <div class="container">
            <div class="row">
                <div class="col-md-12">
                    <h2 class="center-line big-heading white-heading heading">Video About Metagenics</h2>
                    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer et dolor quis urna tempor fermentum in eget lorem. Mauris id laoreet libero. Vivamus vehicula, ante et condimentum mattis, ipsum dolor fermentum metus, pharetra vehicula</p>
                    <a href="#">click to view video</a>
                </div>
            </div>
        </div>
    </div>  <!-- end video-content -->
</section>  <!-- end video -->

JS

<script>
$(document).ready(function(){
   var player = videojs('intro-video');    
   var myButton = player.controlBar.addChild('button', {
            text: "Press me",
            // other options
          });

   myButton.addClass("html-classname");
});
</script>

Thanks in advance.

Upvotes: 3

Views: 1952

Answers (1)

The Hung
The Hung

Reputation: 309

You could do this with CSS if you wanted. Here the way I fixed:

.vjs-default-skin .vjs-big-play-button:before {
  font-family: inherit;
  content: 'Your text goes here';
}

Although pseudo-elements isn't good option. Hope that helps.

Upvotes: 1

Related Questions