如何在 svelte 中使用 youtube embed api

问题描述 投票：0回答：2

如何在 svelte 中使用 https://developers.google.com/youtube/iframe_api_reference 中的 js 代码？在脚本标记（如代码片段）中运行代码似乎与在 svelte 脚本块中运行代码的行为不同。也就是说，它无法识别从 iframe api 加载的“YT”。按原样给出的 html 代码有效，但我希望能够访问播放器以更改视频 id、检查当前时间等，在我的 svelte 脚本标签内。

给定的 YouTube 代码是： 

<!DOCTYPE html>
<html>
  <body>
    <!-- 1. The <iframe> (and video player) will replace this <div> tag. -->
    <div id="player"></div>

    <script>
      // 2. This code loads the IFrame Player API code asynchronously.
      var tag = document.createElement('script');

      tag.src = "https://www.youtube.com/iframe_api";
      var firstScriptTag = document.getElementsByTagName('script')[0];
      firstScriptTag.parentNode.insertBefore(tag, firstScriptTag);

      // 3. This function creates an <iframe> (and YouTube player)
      //    after the API code downloads.
      var player;
      function onYouTubeIframeAPIReady() {
        player = new YT.Player('player', {
          height: '390',
          width: '640',
          videoId: 'M7lc1UVf-VE',
          playerVars: {
            'playsinline': 1
          },
          events: {
            'onReady': onPlayerReady,
            'onStateChange': onPlayerStateChange
          }
        });
      }

      // 4. The API will call this function when the video player is ready.
      function onPlayerReady(event) {
        event.target.playVideo();
      }

      // 5. The API calls this function when the player's state changes.
      //    The function indicates that when playing a video (state=1),
      //    the player should play for six seconds and then stop.
      var done = false;
      function onPlayerStateChange(event) {
        if (event.data == YT.PlayerState.PLAYING && !done) {
          setTimeout(stopVideo, 6000);
          done = true;
        }
      }
      function stopVideo() {
        player.stopVideo();
      }
    </script>
  </body>
</html>

html iframe svelte sveltekit youtube-iframe-api
2个回答
3
投票

在 svelte discord 服务器中进行讨论后，我有以下解决方案。希望这可以帮助其他人经历我刚刚尝试解决这个问题的痛苦。

我创建了一个 youtube 组件（可以随意修改 

YT.Player()
中的任何属性：

<script>
    import { onMount } from 'svelte';

    export let player;
    export let initialVideoId = '';

    const ytPlayerId = 'youtube-player';

    onMount(() => {
        function load() {
            player = new YT.Player(ytPlayerId, {
                height: '100%',
                width: '100%',
                videoId: initialVideoId,
                playerVars: { autoplay: 1 }
            });
        }

        if (window.YT) {
            load();
        } else {
            window.onYouTubeIframeAPIReady = load;
        }
    });
</script>

<svelte:head>
    <script src="https://www.youtube.com/iframe_api"></script>
</svelte:head>

<div id={ytPlayerId} />

这里需要注意的关键事项是：

  1. <svelte:head>
    中的script标签注入了iframe api代码。

  2. VScode（或任何编辑器）会在一堆红色下划线，例如

    Cannot find name 'YT'
    或
    Property 'onYouTubeIframeAPIReady' does not exist on type 'Window & typeof globalThis'
    。您可以忽略这些，因为这些参考代码是从 iframe api 代码注入的，并且在浏览器中实际运行时将正常运行

  3. if (window.YT)...
    语句非常重要 - 第一次挂载嵌入时，window.YT属性将不存在，因此
    window.onYouTubeIframeAPIReady = load;
    它的作用是当加载的iframe api代码运行时，它将尝试执行window.YT属性。 onYouTubeIframeAPIReady()。由于此函数被设置为加载，因此 
    player = new YT.player(...
    按照 OP 中链接的文档中的 YouTube 示例代码。

    但是，如果您导航到站点上的另一个页面，然后返回到嵌入的页面，由于 sveltekit 站点就像 SPA，因此从脚本标记加载的所有代码都会保留。最终发生的情况是，加载的 iframe api 代码中的某些逻辑导致 onYouTubeIframeAPIReady 函数不再运行，因此不会创建新的播放器元素。如果您刷新页面并删除所有加载的代码，嵌入将再次正确加载。为了解决这个问题，如果 

    window.YT
    存在（这是加载的 iframe api 代码创建的一些属性），那么我们可以通过调用 
    load()
    直接创建一个新的播放器，并且我们可以确定加载的 api 代码已经添加到我们的页面，播放器将正常运行。

然后我们可以在页面中导入该组件，并通过绑定到它来访问播放器对象：

<script>
  import Youtube from '$lib/youtube.svelte';

  let player

  const toggle = () => {
    console.log('changing video id')
    player.loadVideoById("dQw4w9WgXcQ");
  }
</script>

<Youtube bind:player/>

<button on:click={toggle}>change video</button>

使用

player
，您可以访问任何 youtube 嵌入 api 提供的函数，例如 loadVideoById 或 getCurrentTime。在上面的示例中，单击按钮会将视频更改为给定的 YouTube 视频 ID。

此外，考虑到对 window 的多次引用，我选择使用嵌入禁用页面的 ssr。我曾经遇到过一些情况，启用 ssr 会导致错误，但这是不一致的，我没有费心去找出到底是什么导致了这些错误。

顺便说一句，

YT.Player()
初始化接受高度和宽度的％值，所以我发现最简单的方法是将它们设置为100％，然后将嵌入放入包装元素中，您可以直接使用CSS调整其大小.

0
投票

另一种选择：

在+layout.svelte中

// Loads the YouTube Iframe API
<svelte:head>
    <script src="https://www.youtube.com/iframe_api"></script>
</svelte:head>

然后你可以创建一个 YouTube.svelte 组件：

 import { onMount } from 'svelte';
 export let youTubeId: string = 'M7lc1UVf-VE';
 $: videoId = youTubeId;
 let done = false;
 let player: any;

 onMount(() => {
  //https://developers.google.com/youtube/iframe_api_reference#Requirements

       const windowRef: any = window;

       if (typeof windowRef.YT != 'undefined') {
           player = new windowRef.YT.Player('player', {
            height: 390,
            width: 640,
            videoId,
            playerVars: {
                playsinline: 1
            },
            events: {
                onReady: onPlayerReady,
                onStateChange: onPlayerStateChange
            }
        });
    }

    function onPlayerStateChange(event: any) {
        if (event.data == windowRef.YT.PlayerState.PLAYING && !done) {
            setTimeout(stopVideo, 6000);
            done = true;
        }
    }
    function stopVideo() {
        if (player) {
            player.stopVideo();
        }
    }
    function onPlayerReady(event: any) {
        event.target.playVideo();
    }
});
最新问题
© www.soinside.com 2019 - 2024. All rights reserved.