关于网站嵌入faceboook以及youtube视频

最新推荐文章于 2023-03-09 19:29:44 发布

YD1218

最新推荐文章于 2023-03-09 19:29:44 发布

阅读量3.2k

点赞数

分类专栏： javascript 文章标签： facebook youtube video

本文链接：https://blog.csdn.net/yq_dxp1218/article/details/80117679

版权

javascript 专栏收录该内容

13 篇文章 0 订阅

订阅专栏

在新闻网站中，我们针对国外用户，需要引入第三方视频，

首先引入youtube视频

我们拷贝youtube视频网址

https://www.youtube.com/watch?v=oK6k9O65QAs或则
https://youtu.be/oK6k9O65QAs

我们可以看到他的规则每个youtube视频都由特殊的id oK6k9O65QAs 就是这个，我们取到他
参考youtube的视频规则

也可以参考 https://developers.google.com/youtube/iframe_api_reference?hl=zh-cn youtube视频api

<iframe  type="text/html" src="http://www.youtube.com/embed/oK6k9O65QAs frameborder="0"></iframe>

可以给iframe定义自己的类名控制样式只需要被iframe嵌入到网站任何地方都可以出现视频，可以自定义视频样式

<!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: '360',
          width: '640',
          videoId: 'oK6k9O65QAs',//唯一的id
          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>
  <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: '360',
          width: '640',
          videoId: 'oK6k9O65QAs',//唯一的id
          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>

这是通过js控制视频播放，可以控制播放以及暂停，也是通过唯一 oK6k9O65QAs的来判断

下边讲解facebook视频我们找一个facebook视频地址如

https://www.facebook.com/ExtremeLoveShow/videos/598167423879792/

<div class="fb-video" data-href="https://www.facebook.com/ExtremeLoveShow/videos/598167423879792/" data-width="auto" data-show-text="false"></div> class="fb-video" data-href="https://www.facebook.com/ExtremeLoveShow/videos/598167423879792/" data-width="auto" data-show-text="false"></div>

最后调用这段js代码，注意要分清顺序，必须先有了 class为fb-video，的元素才可以出视频，上边的视频是根据父元素宽度自适应的，你也可以自己指定视频

  <script>(function(d, s, id) {
    var js, fjs = d.getElementsByTagName(s)[0];
    if (d.getElementById(id)) return;
    js = d.createElement(s); js.id = id;
    js.src = "https://connect.facebook.net/en_US/sdk.js#xfbml=1&version=v2.6";
    fjs.parentNode.insertBefore(js, fjs);
  }(document, 'script', 'facebook-jssdk'));</script><script>(function(d, s, id) {
    var js, fjs = d.getElementsByTagName(s)[0];
    if (d.getElementById(id)) return;
    js = d.createElement(s); js.id = id;
    js.src = "https://connect.facebook.net/en_US/sdk.js#xfbml=1&version=v2.6";
    fjs.parentNode.insertBefore(js, fjs);
  }(document, 'script', 'facebook-jssdk'));</script>