Вам не нужен 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>