当前位置：文江博客话题详情

JavaScript视频播放不触发点击事件

发布于 2025-01-02 23:19:18 字数 1434 浏览 0 评论 0原文

这个概念是这样的，您将视频的 JS 代码放在 div 中，然后您就可以在单击该 div 时执行 jQuery 代码。 IE 当您播放/暂停或视频中的任何内容时，应该触发该事件。在我的示例中，我延迟了文本显示：

如此处

http://jsfiddle.net/R9Wm4/7/< /a>

如果你在 FF 中运行它，它工作得很好，如果你在 IE 中运行它。或 Chrome 它不会触发点击事件。

此行为适用于任何 JS 嵌入视频，无论 YouTube、Vimeo、Amazon s3 ETC。

我是否做错了什么，或者是否有解决方法（即在整个 Div 上放置清晰的图像或其他内容，这让我发疯。）

注意：我尝试使用 MouseDown 事件而不是单击，这确实有效，但是它不会通过单击启动我的视频：-/（除了在 FF 中再次运行，效果很好）

如果您不喜欢 jsFiddle，这里是 JS 代码：

$(function(){
  $('.content').hide();
  $('#delay-start').click(function(){
    if($('.content').is(':hidden')){
        $('.content').delay(1500).fadeIn(1000);
        return false;
    }
  });
});

和 HTML：

<div id='delay-start'>
<script type="text/javascript">
  var playerhost = (("https:" == document.location.protocol) ? "https://market-review.s3.amazonaws.com/comprehensive-market-review-november11/ezs3js/secure/" : "http://market-review.s3.amazonaws.com/comprehensive-market-review-november11/ezs3js/player/");

document.write(unescape("%3Cscript src='" + playerhost + "flv/460089AC-DCB0-154F-0F5574AA57B9963A.js?t="+(Math.random() * 99999999)+"' type='text/javascript'%3E%3C/script%3E"));
</script>
</div>
<div class='content'>
  <p>Welcome to my Hidden and Magical Text! Enjoy Your life</p>
</div>

原文

The concept is this, You place JS Code for a video in a div, then you have jQuery Code that executes when that div is clicked. I.E When you Play/Pause or whatever in the video the event should trigger. In my example I have delayed text showing up:

As Seen Here

http://jsfiddle.net/R9Wm4/7/

If you run this is FF it works fine, if you run it in IE. or Chrome it does not trigger the click event.

This behavior is for any JS embeded video, regardless of YouTube, Vimeo, Amazon s3 ETC.

Is there something I am doing wrong or is there a work around (i.e. put an clear image or something over the whole Div, this is driving me crazy..)

Note: I have tried useing the MouseDown event instead of click and this does work, however it doesn't start my video on a single click :-/ (except again in FF, which works fine)

In case you don't like jsFiddle here is the JS Code:

$(function(){
  $('.content').hide();
  $('#delay-start').click(function(){
    if($('.content').is(':hidden')){
        $('.content').delay(1500).fadeIn(1000);
        return false;
    }
  });
});

And HTML:

<div id='delay-start'>
<script type="text/javascript">
  var playerhost = (("https:" == document.location.protocol) ? "https://market-review.s3.amazonaws.com/comprehensive-market-review-november11/ezs3js/secure/" : "http://market-review.s3.amazonaws.com/comprehensive-market-review-november11/ezs3js/player/");

document.write(unescape("%3Cscript src='" + playerhost + "flv/460089AC-DCB0-154F-0F5574AA57B9963A.js?t="+(Math.random() * 99999999)+"' type='text/javascript'%3E%3C/script%3E"));
</script>
</div>
<div class='content'>
  <p>Welcome to my Hidden and Magical Text! Enjoy Your life</p>
</div>

分享到QQ

分享到微博