javascript - 在 Video.js 中添加文本以播放按钮

Question

我想在 videojs 中添加文本来播放按钮而不是图标。我在申请时尝试了很多东西并进行了很多搜索，但没有找到任何结果，我认为我的代码有一些错误。

我已经成功地在 videojs 上设置了我的播放器。

这是我尝试向按钮添加文本的代码。

<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>

提前致谢。

Answer 1

如果需要，您可以使用 CSS 来实现。这是我修复的方式:

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

虽然伪元素不是好的选择。希望对您有所帮助。