html5 video streaming



我正在使用mediaViews和html5在我们的cakephp网站上流式播放视频。我正在使用videojs的播放器,我遇到了一些问题:

  1. 将不会流在safari/ipad/iphone(我已经转换成mp4)
  2. 不允许观看者在任何浏览器中跳到视频的中间。他们必须从头到尾观看视频,这并不理想。
  3. 对于不支持html5的浏览器,
  4. 不回退到flash对象

它目前在Chrome和Firefox上正确地流式传输。我还没试过IE。

代码如下。视频文件的所有转换都是使用Miro视频转换器完成的,我认为应该可以很好地工作。

任何帮助都是非常感激的!

学生控制器代码

function view_demo_mp4() {
    $this->viewClass = 'Media';
    $params = array(
        'id' => 'webinar.mp4',
        'extension' => 'mp4',
        'path' => APP . "../../documentation" . DS,
        'download' => false,
        'cache' =>true
    );
    $this->set($params);
}
function view_demo_webm() {
    $this->viewClass = 'Media';
    $params = array(
        'id' => 'webinar.webm',
        'extension' => 'webm',
        'path' => APP . "../../documentation" . DS,
        'download' => false,
        'cache' =>true
    );
    $this->set($params);
}
function view_demo_ogg() {
    $this->viewClass = 'Media';
    $params = array(
        'id' => 'webinar.ogv',
        'extension' => 'ogv',
        'path' => APP . "../../documentation" . DS,
        'download' => false,
        'cache' =>true
    );
    $this->set($params);
}
视图

<video class="video-js vjs-default-skin" controls preload="none" width="768" height="432"
     poster="/files/demo_splash.png"
     data-setup="{}">
        <source src="/students/view_demo_mp4" type='video/mp4' />
        <source src="/students/view_demo_ogg" type='video/ogg' />
        <source src="/students/view_demo_webm" type='video/webm' />
 </video>

我有三个版本的视频。最初是使用Quicktime屏幕录制创建的。我目前正在使用:

  • Mp4 H.264,音频通道:2总比特率320
  • Ogv HTML5 Video (Ogg)我没有看到任何进一步的细节
  • WebM HTML%视频WebM(再次,没有更多的细节,我可以找到)

当使用Miro转换器转换视频时,我使用最右边的选项"格式",选择"视频",然后选择输出类型。

这是在一个https网站上,所以也许这可能会导致flash回退问题?除此之外,我没有在视频上看到任何帮助设置后退的说明。我错过什么了吗?

非常感谢您的帮助

如果你的HTML5视频不能在任何苹果手持设备上播放,请尝试自己在Adobe Media Encoder中编码mp4版本。确保在Video选项卡下,选择4或更低的级别,为Profile选择Baseline,并显示足够低的比特率,例如在1000kbps和2000kbps之间(默认通常是20000kbps)。

最新更新