如何在点击图像后播放/启动vimeo视频

How to play/start vimeo video after clicking on an image?

本文关键字：播放 启动 vimeo 视频 图像      更新时间：2023-09-26

我有一些代码，它适用于youtube视频，但我需要与vimeo视频相同的效果，想知道如何做到这一点，有什么建议吗？需要用vimeo取代youtube描述，但我不知道如何做到这一点。P.S对不起我的英语。。。

<style type="text/css">
#head {
    background-color:transparent;
    width:100%;
}
#container {
    cursor:pointer;
    width:520px;
    height:380px;
}
.inactive-state {
    background-repeat: no-repeat;
    background-size: 100%;
    background-image: url();
}
.hover-state {
    background-image: url();
}
</style>
        <section id="head">
    <div id="container" class="click-to-play-video inactive-state">
        <div id="player" class="home-player"></div>
    </div>
</div>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js"></script>
<script type="text/javascript">
    $("#container").mouseenter(function () {
        $(this).addClass('hover-state');
    }).mouseleave(function () {
        $(this).removeClass('hover-state');
    });
    $("#container.click-to-play-video").click(function () {
        $('#head').css({ "background-color": "transparent" });
        player = new YT.Player('player', {
            width: '520',
            height: '300',
            videoId: 'qlEUrEVqDbo',
            playerVars: { 'autoplay': 1 },
            events: {
                'onReady': onPlayerReady,
                'onStateChange': onPlayerStateChange
            }
        });
    });
    var tag = document.createElement('script');
    tag.src = "https://www.youtube.com/iframe_api";
    var firstScriptTag = document.getElementsByTagName('script')[0];
    firstScriptTag.parentNode.insertBefore(tag, firstScriptTag);
    var player;
    function onPlayerReady(event) {
        //event.target.playVideo();
    }
    function onPlayerStateChange(event) {
        if (event.data == YT.PlayerState.ENDED) {
            player.destroy();
            $('#head').css({ "background-color": "transparent" });
        }
    }
</script>

在最简单的形式中，您会想要这样的东西。只需删除图像并附加iframe，自动播放即可。

$('.vimeo-img').click(function (event) {
  var $this = $(this),
      $parent = $this.parent();
  $this.remove();
  $parent().append('<iframe src="..." autoplay="true"></iframe>');
})
相关文章：