在此 SquareSpace 背景视频脚本上自动播放音频？答案

【问题标题】：Autoplay Audio on this SquareSpace background video script?在此 SquareSpace 背景视频脚本上自动播放音频？
【发布时间】：2017-01-20 22:45:13
【问题描述】：

我从 SquareStuio.io 获得了这个脚本，但我的客户希望音频能够自动播放，而目前它没有。它要求用户“取消静音”以启动音频。关于如何自动播放音频的任何想法？这是脚本：

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.0/jquery.min.js"></script>
<script src="https://f.vimeocdn.com/js/froogaloop2.min.js"></script>
<script type="text/javascript" src="https://www.youtube.com/player_api"></script>
<script type="text/javascript">
   function onYouTubeIframeAPIReady() {
  init()
}

function init() {
  url = $(".sqs-video-background, .gallery-video-background").first().attr("data-config-url"), build_player(), build_controls(), add_control_listeners()
}

function build_player() {
  if (vimeo) {
    var a = document.getElementById("vimeoplayer");
    player = $f(a)
  } else player = YT.get("player")
}

function build_controls() {
  var a = ".banner-thumbnail-wrapper, #banner-area-wrapper, .index-section-wrapper, .banner-image, .image-wrapper, .Intro, .main-image",
    b = ".sqs-slide",
    c = ".sqs-slide-layer-content";
  $(c).length > 0 && (b = c);
  var d = $(a + ", " + b).first();
  d.append('<div id="button_container"></div>'), vimeo && $("#button_container").append('<div id="play_pause" class="button_switcher"><img src="https://static1.squarespace.com/static/54dcf1f3e4b03174c3dc75f5/t/5800e78959cc685e1418ff13/1476454281822/whiteplay.png" class="video_button play_pause_btn" id="play_button"/><img src="https://static1.squarespace.com/static/54dcf1f3e4b03174c3dc75f5/t/5800e75f29687f13a413de10/1476454239130/whitepause.png" class="video_button play_pause_btn" id="pause_button"/></div>'), $("#button_container").append('<div id="mute_unmute" class="button_switcher" style="margin-left: 5px;"><img src="https://static1.squarespace.com/static/54dcf1f3e4b03174c3dc75f5/t/57f42eaa893fc0123d94e98d/1475620522820/whtmute.png" class="video_button mute_unmute_btn" id="mute_button"/><img src="https://static1.squarespace.com/static/54dcf1f3e4b03174c3dc75f5/t/57f42e99893fc0123d94e8e4/1475620505075/whtsound.png" class="video_button mute_unmute_btn" id="unmute_button"/></div>'), $("#button_container").css({
    position: "absolute",
    width: "70px",
    height: "30px",
    right: "25px",
    bottom: "20px",
    "z-index": 1e4
  }), $(".button_switcher").css({
    width: "30px",
    height: "30px",
    position: "relative",
    display: "inline-block"
  }), $(".video_button").css({
    display: "inline-block",
    position: "absolute",
    "vertical-align": "top",
    opacity: .99,
    width: "30px",
    height: "30px",
    cursor: "pointer"
  }), $("#play_button, #unmute_button").css("opacity", 0)
}

function add_control_listeners() {
  $(".play_pause_btn").click(function() {
    build_player(), paused ? (vimeo ? player.api("play") : player.playVideo(), paused = !1) : (vimeo ? player.api("pause") : player.pauseVideo(), paused = !0), play_pause_switch()
  }), $(".mute_unmute_btn").click(function() {
    build_player(), muted ? (vimeo ? player.api("setVolume", .5) : player.unMute(), muted = !1) : (vimeo ? player.api("setVolume", 0) : player.mute(), muted = !0), mute_unmute_switch()
  })
}

function play_pause_switch() {
  paused ? ($("#play_button").animate({
    opacity: .6
  }, 500), $("#pause_button").animate({
    opacity: 0
  }, 1e3)) : ($("#play_button").animate({
    opacity: 0
  }, 1e3), $("#pause_button").animate({
    opacity: .6
  }, 500))
}

function mute_unmute_switch() {
  muted ? ($("#mute_button").animate({
    opacity: .6
  }, 500), $("#unmute_button").animate({
    opacity: 0
  }, 500)) : ($("#mute_button").animate({
    opacity: 0
  }, 500), $("#unmute_button").animate({
    opacity: .6
  }, 500))
}
var player, url, paused = !1,
  muted = !0,
  vimeo = !0;
</script>

【问题讨论】：

您应该格式化您的代码示例，使其可读
@xkcd149 这样更好吗？如果你看不出来，我就是个菜鸟=(

标签： javascript html squarespace

【解决方案1】：

你应该这样做：

var hear = document.getElementById('listen');

$(function() {
    if(hear.paused) {
        hear.play();
    } else {
        hear.pause();
    }
});

【讨论】：

listen-ID 是您提供的音频标签的 id。
我尝试将其添加到脚本的末尾，但似乎没有产生影响 - www.sfgmc.org

【解决方案2】：

看！我现在已将我的一段代码包含到您的代码中，并添加了一个新的 HTML 骨架。

<html>
<head>
    <meta charset="utf-8" />
    <title>Stack Overflow</title>

    <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.0/jquery.min.js"></script>
<script src="https://f.vimeocdn.com/js/froogaloop2.min.js"></script>
<script type="text/javascript" src="https://www.youtube.com/player_api"></script>
<script type="text/javascript">
   function onYouTubeIframeAPIReady() {
  init()
}

function init() {
  url = $(".sqs-video-background, .gallery-video-background").first().attr("data-config-url"), build_player(), build_controls(), add_control_listeners()
}

function build_player() {
  if (vimeo) {
    var a = document.getElementById("vimeoplayer");
    player = $f(a)
  } else player = YT.get("player")
}

function build_controls() {
  var a = ".banner-thumbnail-wrapper, #banner-area-wrapper, .index-section-wrapper, .banner-image, .image-wrapper, .Intro, .main-image",
    b = ".sqs-slide",
    c = ".sqs-slide-layer-content";
  $(c).length > 0 && (b = c);
  var d = $(a + ", " + b).first();
  d.append('<div id="button_container"></div>'), vimeo && $("#button_container").append('<div id="play_pause" class="button_switcher"><img src="https://static1.squarespace.com/static/54dcf1f3e4b03174c3dc75f5/t/5800e78959cc685e1418ff13/1476454281822/whiteplay.png" class="video_button play_pause_btn" id="play_button"/><img src="https://static1.squarespace.com/static/54dcf1f3e4b03174c3dc75f5/t/5800e75f29687f13a413de10/1476454239130/whitepause.png" class="video_button play_pause_btn" id="pause_button"/></div>'), $("#button_container").append('<div id="mute_unmute" class="button_switcher" style="margin-left: 5px;"><img src="https://static1.squarespace.com/static/54dcf1f3e4b03174c3dc75f5/t/57f42eaa893fc0123d94e98d/1475620522820/whtmute.png" class="video_button mute_unmute_btn" id="mute_button"/><img src="https://static1.squarespace.com/static/54dcf1f3e4b03174c3dc75f5/t/57f42e99893fc0123d94e8e4/1475620505075/whtsound.png" class="video_button mute_unmute_btn" id="unmute_button"/></div>'), $("#button_container").css({
    position: "absolute",
    width: "70px",
    height: "30px",
    right: "25px",
    bottom: "20px",
    "z-index": 1e4
  }), $(".button_switcher").css({
    width: "30px",
    height: "30px",
    position: "relative",
    display: "inline-block"
  }), $(".video_button").css({
    display: "inline-block",
    position: "absolute",
    "vertical-align": "top",
    opacity: .99,
    width: "30px",
    height: "30px",
    cursor: "pointer"
  }), $("#play_button, #unmute_button").css("opacity", 0)
}

function add_control_listeners() {
  $(".play_pause_btn").click(function() {
    build_player(), paused ? (vimeo ? player.api("play") : player.playVideo(), paused = !1) : (vimeo ? player.api("pause") : player.pauseVideo(), paused = !0), play_pause_switch()
  }), $(".mute_unmute_btn").click(function() {
    build_player(), muted ? (vimeo ? player.api("setVolume", .5) : player.unMute(), muted = !1) : (vimeo ? player.api("setVolume", 0) : player.mute(), muted = !0), mute_unmute_switch()
  })
}

function play_pause_switch() {
  paused ? ($("#play_button").animate({
    opacity: .6
  }, 500), $("#pause_button").animate({
    opacity: 0
  }, 1e3)) : ($("#play_button").animate({
    opacity: 0
  }, 1e3), $("#pause_button").animate({
    opacity: .6
  }, 500))
}

function mute_unmute_switch() {
  muted ? ($("#mute_button").animate({
    opacity: .6
  }, 500), $("#unmute_button").animate({
    opacity: 0
  }, 500)) : ($("#mute_button").animate({
    opacity: 0
  }, 500), $("#unmute_button").animate({
    opacity: .6
  }, 500))
}
var player, url, paused = !1,
  muted = !0,
  vimeo = !0;

    $(function() {

        var hear = document.getElementById("vimeoplayer");

        if(hear.paused) {
            hear.play();
        } else {
            hear.pause();
        }

    })

    </script>


</head>
<body>

    <audio id="vimeoplayer" controls>
        <source src="whistle.mp3" type="audio/mpeg">
    </audio>

</body>
</html>

【讨论】：

现在完全一样，只是我添加的不同之处：
var hear = document.getElementById('listen'); $(function() { if(hear.paused) {hear.play(); } else {hear.pause(); } });
和 (...)
Fudge，仍然没有骰子——SquareSpace 会以某种方式阻止它吗？ - 在此处复制您的代码：www.sfgmc.org