Question

我正在尝试将视频嵌入html的TAG视频中，然后仅使用javascript而不单击下载按钮进行下载。是否有任何方法可以实现该目的，或者API不支持该视频？

Here's the image where I have the video tag and the download button (I want to trigger that functionality just with javascript) 代码：https://codepen.io/ZetaGH/pen/WNNOxNo

// HTML
<html>
  <body>
    <video src="https://firebasestorage.googleapis.com/v0/b/speech-to-text-web.appspot.com/o/dataset%2FAbuse%2Fabusar_x264_0.mp4?alt=media&token=e84607c8-ba77-4c81-99a4-bd42d29cc869" controls></video>
  </body>
</html>

//JS
// I want here some functionality to trigger the download button in the video player

Answer 1

您不需要JS。

但是您可能需要重新考虑它；如果您用下载链接隐藏了视频，则无法播放视频，如下所示：

a, video {
	position: relative;
	display: block;
	width: 800px;
	height: 600px;
}
a {
	margin-top: -600px;
	z-index: 1;
}

<body>
	<video src="https://firebasestorage.googleapis.com/v0/b/speech-to-text-web.appspot.com/o/dataset%2FAbuse%2Fabusar_x264_0.mp4?alt=media&token=e84607c8-ba77-4c81-99a4-bd42d29cc869" controls></video>
	<a href="/download/video/url" download></a>
</body>

当然，您可以使链接仅覆盖顶部，这样控件才可用，但随后有人会在具有不同控件的其他浏览器中使用该链接，并且您会屏蔽这些控件（通常单击视频是为了是“播放”按钮，因此下载后用户会非常恼火。

这严重属于“不要尝试更改本机UX”类别，因为您无法预测站点可能显示的每种设备类型和用户期望。

在Google chrome中，只需将视频放入下载链接即可获得所需的行为；单击视频而不是控件时，它足够聪明以进行下载。但是，例如在firefox中，它只是完全忽略了<a>标签。

<a href="/download/video/url" download>
    <video src="https://firebasestorage.googleapis.com/v0/b/speech-to-text-web.appspot.com/o/dataset%2FAbuse%2Fabusar_x264_0.mp4?alt=media&token=e84607c8-ba77-4c81-99a4-bd42d29cc869" controls></video>
</a>

有什么方法可以仅使用javascript在视频标签中下载视频？

1 个答案: