jQuery/HTML5模态视频(如果存在自动播放功能)播放视频 [英] jQuery/HTML5 modal video if autoplay is present play video

问题描述

为便于理解，请看一下Codepen: http://codepen.io/hennysmafter/pen/YqmLKR

To make it easier to understand please take a look at the Codepen: http://codepen.io/hennysmafter/pen/YqmLKR

codepen是实际代码的简单版本，仅包含必要的部分！

The codepen is a simpler version of the actual code with only the parts that are necessary!

在Codepen中，您有两个弹出窗口，一个弹出窗口具有自动播放视频元素 ，另一个弹出窗口具有自动播放视频元素

In the codepen you have two popups one popup has a video element with autoplay and the other has a video element without autoplay

文档准备就绪时，页面上的所有视频元素都已暂停.由于实际代码中的其他视频，因此无法更改

On document ready all video elements on the page are paused this cannot be changed because of other videos in the actual code

现在我只需要修改代码即可:

Now I just need to have the code adapted so that:

1. 在单击弹出窗口中打开，并添加了类opened(已经存在)
2. 如果弹出窗口中的video元素具有自动播放功能，则播放视频(不起作用)

3. 还是没有自动播放功能，所以什么也不做

1. On click popup opens and class is added opened (already there)
2. If video element inside popup has autoplay then play the video (not working)

3. Or no autoplay so do nothing

if ($('.modal-box.opened').find('video').attr(autoplay) == true) {
    $('.modal-box.opened').find('video').each(function() {
      $(this).get(0).play();
});
}

推荐答案

您有两个常见错误:您在检查autoplay是否为真的部分中仅使用了1个等号

You've two somewhat common mistakes: You only used 1 equals sign in the part where you check if autoplay is true.

单个=用于设置变量，两个则用于检查相等性.

A single = is used for setting variables where as two is used for checking equality.

编辑:您还尝试在jQuery对象上使用传统的HTML样式属性检查.要在jQuery中检查属性，您需要使用.attr(attributeName)

You are also attempting to use traditional HTML style attribute checking on a jQuery object. To check an attribute in jQuery, you need to use .attr(attributeName)

因此，正确的行应为if ($('.modal-box.opened').find('video').attr(autoplay) == true) {

这篇关于jQuery/HTML5模态视频(如果存在自动播放功能)播放视频的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！