Youtube - 自定义播放图标

时间:2015-09-17 10:16:36

标签: javascript html youtube

我想问一下,我是否可以更改Youtube嵌入式视频播放图标? 我发现这篇文章: Can I change the play icon of embedded youtube videos? 但是这个按钮位于原始播放图标的顶部,所以如果我使用透明的东西,原始播放图标将会显示。

感谢您的帮助。

1 个答案:

答案 0 :(得分:17)

我认为你不能改变真正的按钮,但你可以解决它:

  1. 隐藏播放器
  2. 获取与here描述的缩略图相同的缩略图,并将其放在与播放器位置和大小相同的页面上
  3. 将自己的播放图标放在缩略图上
  4. 点击播放图标后,隐藏缩略图和播放图标,显示播放器并使用链接中的YouTube API启动视频
  5. Fiddle

    //youtube script
    var tag = document.createElement('script');
    tag.src = "//www.youtube.com/iframe_api";
    var firstScriptTag = document.getElementsByTagName('script')[0];
    firstScriptTag.parentNode.insertBefore(tag, firstScriptTag);
    
    var player;
    
    onYouTubeIframeAPIReady = function () {
        player = new YT.Player('player', {
            height: '244',
            width: '434',
            videoId: 'AkyQgpqRyBY',  // youtube video id
            playerVars: {
                'autoplay': 0,
                'rel': 0,
                'showinfo': 0
            },
            events: {
                'onStateChange': onPlayerStateChange
            }
        });
    }
    
    var p = document.getElementById ("player");
    $(p).hide();
    
    var t = document.getElementById ("thumbnail");
    t.src = "http://img.youtube.com/vi/AkyQgpqRyBY/0.jpg";
    
    onPlayerStateChange = function (event) {
        if (event.data == YT.PlayerState.ENDED) {
            $('.start-video').fadeIn('normal');
        }
    }
    
    $(document).on('click', '.start-video', function () {
        $(this).hide();
        $("#player").show();
        $("#thumbnail_container").hide();
        player.playVideo();
    });
    .start-video {
        position: absolute;
        top: 80px;
        padding: 12px;
        left: 174px;
        opacity: .3;
        
        cursor: pointer;
        
        transition: all 0.3s;
    }
    
    .start-video:hover
    {
        opacity: 1;
        -webkit-filter: brightness (1);
    }
    
    div.thumbnail_container
    {
        width: 434px;
        height: 244px;
        overflow: hidden;
        background-color: #000;
    }
    
    img.thumbnail
    {
        margin-top: -50px;
        opacity: 0.5;
    }
    <div id="player"></div>
    <div id="thumbnail_container" class="thumbnail_container">
        <img class="thumbnail" id="thumbnail" />
    </div>
    <a class="start-video"><img width="64" src="http://image.flaticon.com/icons/png/512/0/375.png" style="filter: invert(100%); -webkit-filter: invert(100%);"></a>