适用于多种分辨率的HTML5视频标签切换器

时间:2016-04-20 02:37:49

标签: ruby-on-rails ruby html5 ffmpeg paperclip

我将Rails 4应用设置为视频上传/共享网站。我正在使用paperclip上传视频,并使用ffmpeg将2种尺寸的视频处理成Mp4,ogg和webm。

我想向移动设备展示较小的240p视频。我现在可以使用媒体查询或Bootstraps自适应标签来做到这一点,但我更喜欢“解析切换器”按钮,类似于我在其他各种网站上看到的显示“240,480,720,1080”这是否可以在HTML5中自动执行视频标签类似于添加字幕文件时出现的“CC隐藏字幕”按钮?

我试图避免使用自定义播放器。

这是我的快速自举解决方案,但更喜欢按钮/切换器。

<div class="hidden-xs">
    <video style="width:100%" autobuffer controls poster="<%= @video.attachment.url(:preview) %>"><source label="720" src="<%= @video.attachment.url(:original) %>" type="video/mp4" default><source label="ogg" src="<%= @video.attachment.url(:ogg) %>" type="video/ogg"><source label="webm" src="<%= @video.attachment.url(:webm) %>" type="video/webm"><track label="English" kind="subtitles" srclang="en" src="/assets/subtitles.vtt" default><p>Your Browser does not support the video tag.</p></video>
</div>
<div class="visible-xs">
    <video style="width:100%" autobuffer controls poster="<%= @video.attachment.url(:preview) %>"><source label="360" src="<%= @video.attachment.url(:mobile) %>" type="video/mp4" default><source label="ogg mobile" src="<%= @video.attachment.url(:oggmobile) %>" type="video/ogg"><source label="webm mobile" src="<%= @video.attachment.url(:webmmobile) %>" type="video/webm"><track label="English" kind="subtitles" srclang="en" src="/assets/subtitles.vtt" default><p>Your Browser does not support the video tag.</p></video>
</div>

0 个答案:

没有答案