html5视频流

Posted

技术标签:

【中文标题】html5视频流【英文标题】:html5 video streaming 【发布时间】:2012-12-25 04:44:51 【问题描述】:

我正在使用 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"  
     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 HT​​ML% Video webm(同样,我找不到更多详细信息)

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

这是在 https 站点上,所以这可能会导致闪存回退出现问题?除此之外,我没有看到有关 videojs 的任何说明来帮助设置后备。我错过了什么吗?

非常感谢您的帮助。

【问题讨论】:

您是否测试过只是在一个非常简单的页面中播放视频,该页面只包含一个 【参考方案1】:

如果您的 HTML5 视频无法在任何 Apple 手持设备上播放,请尝试在 Adob​​e Media Encoder 中自行编码 mp4 版本。确保在 Video 选项卡下选择 4 或更低的级别,绝对选择 Baseline 作为 Profile,并显示足够低的比特率,例如介于 1000kbps 和 2000kbps 之间(默认值通常为 20000kbps。)。

【讨论】:

以上是关于html5视频流的主要内容,如果未能解决你的问题,请参考以下文章

HTML5中如何显示视频HTML5视频播放

HTML5 视频(Video)元素使用详解

jqm视频播放器,html5视频播放器,html5音乐播放器,html5播放器,video开发demo,html5视频播放示例,html5手机视频播放器

HTML5 Video(视频)

001 html5 视频

HTML5 视频播放器:动态加载视频