Videojs youtube视频无法在台式机Chrome浏览器的iframe中播放

时间:2019-02-20 12:44:15

标签: javascript html iframe youtube video.js

我正在从https://github.com/videojs/videojs-youtube/videojs-youtube/examples/simple.html实例页面加载到其他域的iframe中。当我这样做时,视频将无法播放,并且加载指示器会旋转并且不会停止。我在开发人员控制台中没有看到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>

我将不胜感激。

1 个答案:

答案 0 :(得分:0)

使用此

<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>