在 Video.js 中添加文本以播放按钮答案

【问题标题】：Add text to play button in Video.js在 Video.js 中添加文本以播放按钮
【发布时间】：2015-08-04 06:20:05
【问题描述】：

我想在 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 -->

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

提前致谢。

【问题讨论】：

标签： javascript html video html5-video video.js

【解决方案1】：

如果你愿意，你可以用 CSS 做到这一点。这是我固定的方式：

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

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

【讨论】：