在这个SquareSpace背景视频脚本上自动播放音频？

时间：2017-01-20 22:45:14

标签： javascript html5 squarespace

我从SquareStuio.io获得了此脚本，但我的客户希望音频自动播放，而目前却没有。它要求用户取消静音＆＃34;开始音频。有关如何自动播放音频的任何想法？这是脚本：

<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>

2 个答案:

答案 0 :(得分：0)

你应该做那样的事情：

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

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

答案 1 :(得分：0)

看！我现在已经将我的代码包含在你的代码中了，我添加了一个新的HTML-skelton。

<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>
相关问题
最新问题