html5:在控件视频中添加下载按钮

时间:2017-05-11 04:32:49

标签: javascript jquery html5

是否可以在Chrome 55+中控制视频中添加下载按钮以在其他浏览器中实现?

如果可能,我该如何添加?

1 个答案:

答案 0 :(得分:0)

总之,您需要根据视频的javascript API自行制作视频控制面板。有些图书馆可能会成为一个良好的开端,例如Player.js等。

自定义视频控件时,可以使用download元素的<a>属性来实现下载按钮:

<a href="/sampleVideo.mp4" download><span class="icon-download"></span></a>

以下是一些详细说明:

对于control的{​​{1}}属性,您无法自定义其UI。不幸的是,在HTML5 specification,&#34;下载按钮&#34;不在&#34;列表中,应该包括功能&#34; <video>

  

如果存在该属性,或者对媒体元素禁用了脚本,则用户代理应向用户公开用户界面。此用户界面应包括开始播放,暂停播放,寻找内容中的任意位置(如果内容支持任意搜索),更改音量,更改隐藏字幕或嵌入式手语轨道的显示,选择不同音频的功能跟踪或打开音频描述,并以更适合用户的方式显示媒体内容(例如全屏视频或独立的可调整大小的窗口)。其他控件也可以提供。

在我的实验中,我发现Chrome 58和Opera 44在视频控件中有下载按钮,而Safari和Firefox则没有。

但是,您仍然可以使用视频的DOM API构建自己的控制面板(启动,暂停,恢复,静音等)。 Player.js是一个很好的示例,它演示了您可以根据原生JavaScript API执行的操作。