【问题标题】:loadVideoById() does not change the video in youtube playerloadVideoById() 不会更改 youtube 播放器中的视频
【发布时间】:2023-03-11 00:27:01
【问题描述】:

我正在使用 Iframe YouTube API 开发 YouTube 播放器。播放器加载视频,但是当我尝试使用 onclick 事件更改视频时,它不会更改视频。这是我的 HTML。

<li onclick="changeVideo('Vw4KVoEVcr0')"><a href=""><img class="button" src="" alt="Video Button"> item</a></li>

这是我的 JavaScript。

// JavaScript Document

//create script tag for youtube api
var tag = document.createElement("script");

//set the src attribute of the script tag to the youtube api
tag.src = "https://www.youtube.com/iframe_api";

//get the first script tag of the document
var firstScript = document.getElementsByTagName("script")[0];

//insert our youtube api tag before the first script tag in the page
firstScript.parentNode.insertBefore(tag, firstScript);

/*
*
*
*/

//the video player element
var player;

//state of the video being played
var done;

/*
*
*/
function onYouTubeIframeAPIReady(){
    //
    player = new YT.Player("player", {
        width: "848",
        height: "400",
        videoId: "Unp7GtSPJ0Y",
        events: {
            "onReady": onPlayerReady,
            "onStateChange": onPlayerStateChange
        }
    });
}

/*
*
*/
function onPlayerReady(event){
    event.target.playVideo();   
}

/*
*
*/
function onPlayerStateChange(event){
    if(event.data == YT.PlayerState.PLAYING && !done){
        setTimeout(stopVideo, 6000);
        done = true;
    }
}

/*
*
*/
function stopVideo(){
    player.stopVideo();
}

/*
* Changes the videoId and starts playing the new video
*/
function changeVideo(videoIdentifier){
    var vidId = videoIdentifier;
    player.loadVideoById(vidId);
}

【问题讨论】:

    标签: javascript iframe youtube-api


    【解决方案1】:

    只是我在很少睡眠后变得非常愚蠢哈哈。拿走链接。在视频更改之前,它会不断将我重定向到新版本的页面。

    【讨论】:

    • 你有没有想过这个问题?
    • 是的,你不能有链接。空链接仍会刷新当前页面。 (我相信这是问题所在)请记住,您在我遇到此问题多年后才问我,但我会在今天晚些时候再次检查。
    • 我拿了你的代码并做了一些修改。现在作为一个抽象播放器工作,我可以使用不同的 youtube 视频 ID 创建任意数量的按钮。我将它设置为 onclick,它将 youtube 播放器加载到弹出窗口中。
    猜你喜欢
    • 1970-01-01
    • 2014-05-01
    • 1970-01-01
    • 2010-10-15
    • 1970-01-01
    • 2010-09-27
    • 1970-01-01
    • 1970-01-01
    • 2015-02-16
    相关资源
    最近更新 更多