xutl/yii2-videojs-widget

yii2-videojs-widget 是 [video.js](http://www.videojs.com/) 的 Yii 2 封装。这是一个 JavaScript 和 CSS 库,使得使用和构建 HTML5 视频变得更加容易。这也可以被称为 HTML5 视频播放器。

安装次数: 5,216

依赖: 0

建议者: 0

安全性: 0

星标: 0

关注者: 1

分支: 2

开放问题: 0

语言:JavaScript

类型:yii2-extension

1.0.2 2016-12-27 10:37 UTC

This package is auto-updated.

Last update: 2024-09-11 01:49:41 UTC


README

Latest Version Software License Total Downloads

yii2-videojs-widget 是 video.js 的 Yii 2 封装。这是一个 JavaScript 和 CSS 库,使得使用和构建 HTML5 视频变得更加容易。这也可以被称为 HTML5 视频播放器。

安装

安装此扩展的首选方式是通过 composer

运行

php composer.phar require --prefer-dist xutl/yii2-videojs-widget "~1.0"

或者添加

"xutl/yii2-videojs-widget": "~1.0"

到你的 composer.json 文件的 require 部分。

如何使用

示例 1 - HTML5

<?php
    echo \xutl\videojs\VideoJsWidget::widget([
        'options' => [
            'class' => 'video-js vjs-default-skin vjs-big-play-centered',
            'poster' => "http://www.videojs.com/img/poster.jpg",
            'controls' => true,
            'preload' => 'auto',
            'width' => '970',
            'height' => '400',
        ],
        'tags' => [
            'source' => [
                ['src' => 'http://vjs.zencdn.net/v/oceans.mp4', 'type' => 'video/mp4'],
                ['src' => 'http://vjs.zencdn.net/v/oceans.webm', 'type' => 'video/webm']
            ],
            'track' => [
                ['kind' => 'captions', 'src' => 'http://vjs.zencdn.net/vtt/captions.vtt', 'srclang' => 'en', 'label' => 'English']
            ]
        ]
    ]);
?>

示例 2 - 实时消息协议 (RTMP)

<?php
    echo \xutl\videojs\VideoJsWidget::widget([
        'options' => [
            'class' => 'video-js vjs-default-skin vjs-big-play-centered',
            'controls' => true,
            'preload' => 'auto',
            'width' => '420',
            'height' => '315',
            'data' => [
                'setup' => [
                    'autoplay' => true,
                    'techOrder' =>['flash', 'html5']
                ],
            ],
        ],
        'tags' => [
            'source' => [
                ['src' => 'rtmp://live.ao.com/video/spacealonehd_sounas_640_300.mp4', 'type' => 'rtmp/mp4']
            ]
        ]
    ]);
?>