时间戳

首页 > 解决方案 > Videojs youtube视频没有在桌面Chrome的iframe中播放

javascript - Videojs youtube视频没有在桌面Chrome的iframe中播放

问题描述

我正在从https://github.com/videojs/videojs-youtube在不同域的 iframe 中加载/videojs-youtube/examples/simple.html示例页面。当我这样做时，视频不会播放，并且加载指示器会旋转并且不会停止。我在开发控制台中没有看到任何 javascript 错误。当我直接访问同一个文件时，视频播放没有任何问题。

该问题仅在最新的桌面 Chrome 72.0.3626.109 中出现。其他浏览器似乎没有。

这是我这边的屏幕截图：

https://www.youtube.com/watch?v=QBmre1vaLwI

现场示例：https ://jsfiddle.net/ws8tnc13/

iframe 来源：https ://alxd.ru/videojs-youtube/

页面源代码：

<!DOCTYPE html>
<html>
<head>
  <link type="text/css" rel="stylesheet" href="./video.js/dist/video-js.min.css" />
</head>
<body>
  <video
    id="vid1"
    class="video-js vjs-default-skin"
    controls
    autoplay
    width="640" height="264"
    data-setup='{ "techOrder": ["youtube", "html5"], "sources": [{ "type": "video/youtube", "src": "https://www.youtube.com/watch?v=xjS6SftYQaQ"}] }'
  >
  </video>

  <script src="./video.js/dist/video.js"></script>
  <script src="./Youtube.min.js"></script>
</body>
</html>

我会很感激任何帮助。

标签： javascripthtmliframeyoutubevideo.js

解决方案

用这个 

<iframe width="560" height="315" src="https://www.youtube-nocookie.com/embed/QBmre1vaLwI" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>

推荐阅读