javascript - 检查 iframe src 中是否存在自动播放属性

标签 javascript jquery html iframe

我想检查 iframe url 中是否存在“autoplay”属性。如果该属性不存在,我想添加“自动播放”。如果存在,我想将“autoplay=1”的值更改为“autoplay=0”,反之亦然。

我有带有动态 src 的 iframe。现在,每当我单击播放图标时,自动播放属性都会附加为 https://www.youtube.com/embed/fffjZpMIHk?autoplay=1?autoplay=1。所以我想检查该属性是否存在,然后需要追加。

<div class="video-container" id="video-container">
  <iframe src="https://www.youtube.com/embed/fffjZpMIHk" frameborder="0" allowfullscreen=""></iframe> 

我现在使用的脚本:

$(".playButton").on('click',function() {
  $(".flex-active-slide iframe")[0].src += "?autoplay=1";
  $('.flex-active-slide').contents().find("iframe").attr('src', function(i, oldSrc) {
    return oldSrc.replace('autoplay=0', 'autoplay=1');
  });
});

示例 fiddle :Demo

最佳答案

您可以尝试使用以下代码吗:

$(function() {
    $(".playButton").on('click',function() {
      var iframeObj = $(".flex-active-slide iframe")[0];
      var currentURL = iframeObj.src;

        if(currentURL.indexOf("autoplay=") == -1)
        {
            //autoplay not present in src; so lets add it
            currentURL = currentURL + '?autoplay=1'
        }
        else{
            if(currentURL.indexOf("autoplay=1")>-1){
                //replace autoplay=1 with autoplay=0
                currentURL = currentURL.replace('autoplay=1', 'autoplay=0');
            }
            else
            {
                //replace autoplay=0 with autoplay=1
                currentURL = currentURL.replace('autoplay=0', 'autoplay=1');
            }
        }

        iframeObj.src = currentURL; //set the newer src to iframe

    });
});

关于javascript - 检查 iframe src 中是否存在自动播放属性,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/41951729/

相关文章:

jquery - 如何使 HTML/CSS 百分比图表的边框变细?

jquery - 如何使用 jquery 和 css 对齐动画菜单

javascript - 检索 CSSStyleDeclaration 原生 Javascript 对象的键

javascript - 如何从 URL 中只获取数字?

javascript - 将效果淡入 Bootstrap 3 轮播

javascript - HTML 5 模板中使用的 PHP 联系表单,但不发送电子邮件

javascript - 如何检查动态生成的 radio 输入值

html - Bootstrap 导航栏中/上方的中心 Logo

javascript - 滚动 div 并重新启用溢出后,焦点位于 div 时禁用正文滚动 :auto body scrolls

html - 如何将图标与其他标签对齐?