我正在使用 mediaViews 和 html5 在我们的 cakephp 网站上流式传输视频截屏。我正在为播放器使用 videojs,但遇到了一些问题:
- 不会在 safari/ipad/iphone 中流式传输(我已将其转换为 mp4)
- 不允许观看者在任何浏览器中跳到视频的中间。他们必须从头到尾直接观看视频,这并不理想。
- 不回退到不支持 html5 的浏览器的 flash 对象
它目前在 Chrome 和 Firefox 上正确流式传输。我还没试过IE。
代码如下。视频文件的所有转换都是使用 Miro Video Converter 完成的,我读过它应该可以正常工作。
非常感谢任何帮助!
学生控制器代码
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 视频 (Ogg) 我没有看到任何进一步的细节
- WebM HTML% Video webm(同样,我找不到更多细节)
当使用 Miro 转换器转换视频时,我使用最右边的选项“格式”,选择“视频”,然后选择输出类型。
这是在 https 站点上,所以也许这可能会导致闪存回退出现问题?除此之外,我没有看到有关 videojs 的任何说明来帮助设置后备。我错过了什么吗?
非常感谢您的帮助。