我有一个带有Poster属性的HTML5视频。 我想以某种方式进行设置,以便您可以单击视频元素上的任何位置(海报图像的区域),它将触发播放事件并开始播放视频? 我觉得这是相当标准的做法,但是如果没有Flash,我找不到解决办法。 任何帮助将非常感激。

#1楼 票数:65

这对我来说是安德鲁。

在您的html头中添加这小段js:

var video = document.getElementById('video');
video.addEventListener('click',function(){
    video.play();
},false);

或者,只需将onlick属性直接添加到您的html元素中:

<video src="your_video" width="250" height="50" poster="your_image" onclick="this.play();"/>

#2楼 票数:17

也将其发布在这里,但这也适用于该主题。

我在执行此操作时遇到了无数问题,但最终想出了一个可行的解决方案。

基本上,以下代码在视频中添加了一个点击处理程序,但忽略了下部的所有点击(0.82是任意的,但似乎适用于所有尺寸)。

$("video").click(function(e){

    // handle click if not Firefox (Firefox supports this feature natively)
    if (typeof InstallTrigger === 'undefined') {

        // get click position 
        var clickY = (e.pageY - $(this).offset().top);
        var height = parseFloat( $(this).height() );

        // avoids interference with controls
        if (clickY > 0.82*height) return;

        // toggles play / pause
        this.paused ? this.play() : this.pause();
    }
});

#3楼 票数:6

使用发帖人属性不会更改行为。 它只是在加载视频时显示该图像。 让视频自动开始(如果浏览器实现不这样做),那么您必须执行以下操作:

<video id="video" ...></video>

在JavaScript中使用jQuery:

$('#video').click(function(){
   document.getElementById('video').play();
});

希望能帮助到你

#4楼 票数:4

是的,这听起来像浏览器创建者或html规范编写者只是“忘记了”的常规功能。

我已经写了几个解决方案,但是它们都不是真正的跨浏览器或100%可靠的。 包括单击视频控件的问题会导致停止视频的意外后果。 相反,我建议您使用经过验证的解决方案,例如VideoJS: http ://videojs.com/

#5楼 票数:0

使用get(0)也可以

    var play = $('.playbutton');
    var video = $('#video');
    play.click(function(){
        video.get(0).play();
    })

#6楼 票数:0

我在react和es6中正在这样做。 这是我在阅读Daniel Golden的解决方案后制作的现代版本:

const Video = ({videoSources, poster}) => {
  return (
    <video
      controls
      poster={poster}
      onClick={({target: video}) => video.paused ? video.play() : video.pause()}
    >
      {_.map(videoSources, ({url, type}, i) =>
        <source key={i} src={url} type={type} />
      )}
    </video>
  )
}

#7楼 票数:-2

<script type="text/javascript">
    function actualNextSibling(el) {    // needed to smooth out default firefox/IE behavior
        do { el = el.nextSibling } while (el && el.nodeType !== 1);
            return el;
    }
</script>
<div onclick="actualNextSibling(this).style.display='block'; this.style.display='none'">
    <img src="splash.jpg" alt="splash" style="cursor: pointer" />
</div>
<div style="display: none">
    <iframe width="440" height="248" src="//www.youtube.com/embed/9FOZEbEpyA8?rel=0&autoplay=1"frameborder="0" allowfullscreen></iframe>
</div>

  ask by Andrew translate from so

未解决问题?本站智能推荐:

1回复

HTML5在图像上播放暂停视频或单击视频

我的页面上有没有控件的HTML5视频。 我在视频上使用图像(播放图标)。 我希望视频可以在单击视频或图标图像时播放/暂停。 这是我尝试使用的脚本,但是不起作用: 如果单击视频,效果很好,与此同时,如果单击图标图像,则无任何反应。 $(document).on('click',
1回复

HTML5视频未使用.load()返回海报图像

我有一个带有海报图像和叠加内容的视频。 当用户单击自定义播放按钮时,视频请求全屏显示。 如果用户退出全屏显示,则会重新加载视频并返回叠加内容。 一切都很好,除了海报图像没有返回。 谁能帮我这个? javascript / jQuery是:
1回复

随机化HTML5视频海报图像

我已经制作了HTML5视频播放器,我想强制海报图像在视频播放之前至少显示4秒钟。 我也想随机显示的图像。 我尝试使用PHP在images文件夹中查找并在图像1至3之前进行随机化。但是,我根本无法显示图像,也无法将其随机化。 有人可以帮忙吗? 这是我的代码:
2回复

JavaScript停止并返回海报HTML5视频

这是我的JavaScript,当按下按钮时,它会暂停并播放HTML 5视频,但我想停止播放视频而不是暂停并返回到视频海报,我该如何实现?
1回复

当我单击html5中的图像时,播放视频时控件无法正常工作?

我正在用HTML5播放两个视频,我写了一些Javascript来控制播放/暂停选项。 如果我单击海报,则正在播放视频。 但是,如果我使用2个视频,则在这种情况下,播放/暂停按钮无法正常工作。 有时,当我单击第二个视频时,就会播放第一个视频。 我想将控件分别应用于视频。 脚本代码:
2回复

视频嵌入的海报图像

在我的主页上,我有4个嵌入式视频。 为了减少加载时间,我想生成链接到具有真实嵌入视频的其他页面的缩略图。 如何生成这些缩略图? 注意到: 嵌入式视频来自几个视频剪贴网站(dailymotion,youtube,vimeo或者例如: 此视频 ......) 网站管理员每天都会
1回复

视频html5:如何获取当前播放的来源

在<video>标签中,如果有很多来源(不同的编解码器),如何知道当前使用JQuery播放的源URL? 我尝试使用src属性,但它是空的。 谢谢! 光伏
1回复

暂停后html5视频无法播放

我正在努力与自动暂停,然后再次播放(手动)问题。视频在2秒后暂停,这很好。 现在还有另一个按钮,点击该按钮,视频应该从暂停的位置开始播放。 这是我的代码(html): jQuery的: 我肯定没有关于当前时间和设定时间的正确道路。请建议。 JSFiddle是 http://