Question

我正在创建一个网页，我必须在其中加入一个视频，所以我使用了pakvim.com中的一个。我使用了他们的嵌入选项，并插入了他们给我的代码。 vidoe工作正常，但我不希望视频在页面加载后开始播放。我已经尝试过使用autoplay =＆＃34; false＆＃34;或自动播放=＆＃34; 0＆＃34;它没有用。如何在不使用vidoe标签的情况下执行此操作？我也想只用html做这个。

＆＃13;

xmodmap

＆＃13;

Answer 1

您正在将第三方托管的HTML文档加载到框架中。

该HTML文档正在加载视频并将其配置为自动播放。

您无法控制该HTML文档（not even with JS），因此您无法阻止它将视频设置为自动播放。

Answer 2

@Quentin说的是正确的，除非该服务有一个允许您像YouTube一样访问的API。但是，当用户点击该视频时，您仍然可以使用该视频并在您的网站上播放该视频。

制作或查找iframe尺寸的图片（1＃560x315）。
将其上传到您的服务器或图片主机，并将iframe的网址替换为图片的网址，并将iframe设为id（2＃id='vid1'。）< / p>
接下来，创建一个div并为其分配一个类（3＃class='overlay'）并在其中放置一个<a> nchor。
为主播href分配视频网址（4＃href='http://pakvim.com/embed/nCE4UUPxO_s'）的值，然后为其指定属性target，其值为 iframe＆＃39; id （5＃target='vid1＆＃39;。）
现在将所有节点包装在另一个div中。此布局将与提供的CSS一起使用。
为了简洁起见，我没有在这里列出CSS或JS，但请记住，除了你知道每种风格在做什么和什么之外，任何与CSS和/或JS的偏差都可能无法保证成功。 JS功能会做 - 如果没有另一个，它将无法正常运行。此处未列出的详细信息在代码段中进行了注释。

<强>段

＆＃13;

// Reference the div.overlay
var overlay = document.querySelector('.overlay');

// When div.overlay is clicked...
overlay.addEventListener('click', function(event) {
  // Assign the clicked node to a var
  var tgt = event.target;
  // Set the CSS display property of tgt to 'none'
  tgt.style.display = 'none';
}, false);

＆＃13;

/* #1 */
.box,
.overlay {
  width: 560px;
  height: 315px;
  overflow: hidden;
}
.box {
  position: relative;
}
/* This ruleset will place .overlay completely over the iframe */
/* #3 */
.overlay {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  z-index: 1;
}
/* This ruleset will stretch the anchor completely over the .overlay */

a {
  display: block;
  width: 100%;
  height: 100%;
}
iframe {
  position: absolute;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
}

＆＃13;

<div class='box'>
  <!-- #3 -->
  <div class='overlay'>
    <!-- #4 --><!-- #5 -->
    <a href='http://pakvim.com/embed/nCE4UUPxO_s' target='vid1'></a>
  </div>
  <!-- #2 --> 
  <iframe name='vid1' width="560" height="315" src="http://imgh.us/your_logo_here.jpg" frameborder="0" allowfullscreen></iframe>
</div>

＆＃13;

<强>参考

如何停止自动播放？

2 个答案: