video html5不显示控件按钮,显示涵盖HTML5视频的按钮(Show button that covers HTML5 video)...

显示涵盖HTML5视频的按钮(Show button that covers HTML5 video)

我想显示一个播放按钮，它覆盖整个html5视频，当您点击启动视频时。 这可能吗？

谢谢！

I want to show a play button, that covers the whole of an html5 video that when you click initiates the video. Is this possible?

Thanks!

原文：https://stackoverflow.com/questions/17408396

更新时间：2019-09-14 01:59

最满意答案

如果在单击按钮时问题是播放视频，请快速查看。 您只需在javascript中获取视频，然后调用play功能即可。 对于按钮部分，您可以使用css display:inline-block; position:relative简单地将视频包装在div中display:inline-block; position:relative display:inline-block; position:relative和一个带有css position:absolute; top:50%; left:50%;的标签position:absolute; top:50%; left:50%; position:absolute; top:50%; left:50%; 所以你会的

Click to start

Your browser does not support HTML5 video.

If your problem is playing the video when the button is clicked, have a quick look at this . You simply get your video in javascript, and call play function. For the button part, you can simply wrap your video in a div with the css display:inline-block; position:relative and a tag with the css position:absolute; top:50%; left:50%; so you would have

Click to start

Your browser does not support HTML5 video.

相关问答

您可以在打开它(或关闭弹出窗口)时获取对jQuery视频元素的引用，并使用pause()暂停它，然后将“currentTime”属性设置为0以返回到开头。 以下是对currentTime 文档的参考。 这是一个代码示例： var mediaElement = document.getElementById("video");

mediaElement.pause();

mediaElement.currentTime = 0;

You can get a reference to your

...

您可以通过Javascript禁用控件： document.getElementById('video-player').controls = false

或者只是删除controls属性：

You can disabled controls

...

评论时你的代码有一些错误。 我修复了它们，现在你可以看到一个工作的jsfiddle 使用Javascript var video = $('video').get(0);

$('video, #video-controls').mouseenter(function(){

if($('#video-controls').css('display') === 'none')

$('#video-controls').show();

});

$('video, #v

...

这是海报的问题。 我认为如果海报没有在代码中设置。 webview会为视频标签设置一个默认值。 所以我将poster的值设置为'null'。 没关系。 It is the poster's issue. I think if the poster is not set in code. The webview would set a default one for the video tag. So I set the value of poster as 'null'. It is ok.

你可能会让这个看起来更优雅，但下面的代码示例将允许你有一些按钮来改变HD和常规版本之间的来源(根据按钮的ID，但你可以根据需要改变逻辑)。 代码还会检查浏览器是否支持mp4，ogg或webm，并默认使用第一种支持的格式(因此，如果您使用代码的那部分，则可能需要对每种类型进行编码

Your b

...

视频标签有很多你可以听的事件 。 一种是在视频不再暂停时播放。 以下是您如何收听该事件的示例。 let clicks = 0;

let video = document.getElementById("myVideo");

video.addEventListener("play", obApi);

function obApi() {

clicks++;

console.log(`I've been played ${clicks} time/s`);

}

...

要检测您的视频是否正在播放，您可以使用playing (或play )和pause事件，然后您可以显示或隐藏文字： HTML：

JS： $(function(){

var video = $('#video')[0];

video.addEventListener('playing', function(){

$('.text').fadeOut()

...

Android文档说 您需要设置WebChromeClient并实现onShowCustomView(View，WebChromeClient.CustomViewCallback)和onHideCustomView()。 如果缺少这两种方法中的任何一种，则Web内容将不被允许进入全屏。 如果你只是把代码放在你设置webview的地方，那么按钮就会显示出来。 你不必对代码做任何事情，你只需要它实现，否则股票android将隐藏按钮。 webView.setWebChromeClient(new W

...

如果在单击按钮时问题是播放视频，请快速查看。 您只需在javascript中获取视频，然后调用play功能即可。 对于按钮部分，您可以使用css display:inline-block; position:relative简单地将视频包装在div中display:inline-block; position:relative display:inline-block; position:relative和一个带有css position:absolute; top:50%; left:50%;的

...

如果您更改了JavaScript 加载类型 No wrap - in

那么它可以正常工作。 的jsfiddle If you change your JavaScript load type No wrap - in then it works. JSFiddle