hzhihua/yii2-videojs-widget - Packagist

link管理

链接快照平台

输入网页链接，自动生成快照
标签化管理网页链接

相关文章推荐

刀枪不入的青椒 · 聊天应用与开发框架LobeChat_an ...· 10 月前 ·

强悍的领结 · @DisallowConcurrentExe ...· 1 年前 ·

谦和的沙滩裤 · MATLAB--求一个矩阵中所有元素的平均值 ...· 2 年前 ·

好帅的砖头 · ruoyi-vue前后端项目使用war包的服 ...· 2 年前 ·

<?= \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