<?= \hzhihua\videojs\VideoJsWidget::widget([
    'options' => [  // video tag attibutes
        'class' => 'video-js vjs-default-skin vjs-big-play-centered',
        'title' => '这里是视频标题',
        'poster' => "//vjs.zencdn.net/v/oceans.png",  // 视频播放封面地址
        'controls' => true, // 显示控制页面
        'width' => '300', // 设置宽度
        'data' => [
            'setup' => [
                'language' => \hzhihua\videojs\VideoJsWidget::getLanguage(), // 设置语言
    'jsOptions' => [
        'playbackRates' => [0.5, 1, 1.5, 2],  // 播放速率选项
    'tags' => [
        'source' => [
            ['src' => '//vjs.zencdn.net/v/oceans.mp4', 'type' => 'video/mp4'],
        'p' => [
            ['content' => '您的浏览器不支持媒体播放'],
<?= \hzhihua\videojs\VideoJsWidget::widget([
     'options' => [  // video tag attibutes
         'class' => 'video-js vjs-default-skin vjs-big-play-centered',
         'title' => '这里是视频标题',
         'poster' => "//vjs.zencdn.net/v/oceans.png",  // 视频播放封面地址
         'controls' => true, // 显示控制页面
         'preload' => false,
         'playsinline' => true, // 禁止在iPhone Safari中自动全屏   ios10以后版本
         'webkit-playsinline' => true, // 禁止在iPhone Safari中自动全屏   ios10以前版本
         'autoplay' => false, // 是否自动播放
         'loop' => false, // 循环播放
         'hidden' => false, // 是否隐藏
         'width' => '500',
//       'height' => '260',
         'data' => [
             'setup' => [
//               'aspectRatio' => '16:9',  // responsive 响应式比例
                 'techOrder' => ['html5', 'flash'],  // 默认HTML5播放  不支持HTML5自动转flash播放
                 'language' => Yii::$app->language,
     'jsOptions' => [
         'playbackRates' => [0.5, 1, 1.5, 2],  // 播放速率选项
//            'controlBar' => [
//                'children' => [
//                    'playToggle' => true,
//                    'bigPlayButton' => false,
//                    'currentTimeDisplay' => true,
//                    'timeDivider' => true,
//                    'durationDisplay' => true,
//                    'liveDisplay' => true,
//                    'flexibleWidthSpacer' => true,
//                    'progressControl' => true,
//                    'muteToggle' => true,  // 声音图标
//                    'volumeControl' => true,  // 声音控制条
//                    'captionsButton' => true,  // 字幕
//                    'chaptersButton' => true,
//                    'playbackRateMenuButton' => true,
//                    'subtitlesButton' => true,
//                     'settingsMenuButton'=>[
//                          'entries'=>[
//                              'subtitlesButton',
//                              'playbackRateMenuButton',
//                          ],
//                     ],
//                    'fullscreenToggle' => true,
//                ],
//            ],
     'initFunction' => '
         function () {
             console.log(this);
     'tags' => [
         'source' => [
             ['src' => '//vjs.zencdn.net/v/oceans.mp4', 'type' => 'video/mp4'],
             ['src' => 'audio.mp3', 'type' => 'audio/mp3'],
         'p' => [
             ['content' => '您的浏览器不支持html5视频播放'],
//            'track' => [ // 字幕
//                ['kind' => 'captions', 'src' => './example-captions.vtt', 'srclang' => 'zh-CN', 'label' => '中文字幕'],
//                ['kind' => 'captions', 'src' => './example-captions.vtt', 'srclang' => 'en', 'label' => '英文字幕']
//            ]
 ]); ?>
examples
videojs