Question

我正在尝试将HTML5剪辑仅在首次到达/页面加载时一次播放到主页，然后再播放。此外，我希望视频淡出并在播放后消失。我知道你可以用JQuery做一次和fadeout，但我是初学者，我正在努力学习语法。一个更有经验的编码器可以帮助我调整我的代码，所以这有用吗？这是我到目前为止所拥有的！

<!DOCTYPE html>
<html>
<head>
<script src="jquery-3.2.0.min.js"></script>
<script>
$(document).ready(function(){
$("#video").one("load", function(){
$('#video').get(0).play()
});

</script>

</head>
<body>

<h2>This is a website</h2>

<video id="video">
<source src="clip.mp4" type="video/mp4">

Your browser does not support HTML5 video.
</video>
</body>
</html>

Answer 1

<强>更新

OP请求视频的状态是持久的。我建议使用cookies或localStorage。以下更新托管在PLUNKER上，但未在代码段上托管，因为严格的安全措施会阻止localStorage的使用。

最初应遵循的演示有一个基本流程：

在初始页面加载时，视频播放，控制台显示：

缓存设置为：已播放
视频结束并淡出后，重新加载页面。请注意，视频不再存在，也不播放。控制台现在说：

缓存是：播放
重新加载页面几次，不会改变。
如果您需要将页面恢复为原始状态，我添加了一个删除缓存按钮，删除该特定密钥，该密钥存储负责将页面保持在状态的信息。发布视频播放。
点击删除缓存按钮后，控制台应该说：

<强>未定义

这表示缓存已成功删除。详细信息在PLUNKER

<video>

ended

<强>段

// Create and reference video element
var vid = document.createElement('video');

// Add class for styling
vid.classList.add('playing');

// Add a src to .vid
vid.src = 'http://media6000.dropshots.com/photos/1381926/20170326/023642.mp4';

// Load .vid
vid.load();

// Add .vid to body
document.body.appendChild(vid);

// Play video
vid.play();

/* Register ended event to vid
|| After video has ended...
*/
vid.addEventListener('ended', function(e) {

  // Pause vid
  vid.pause()

  /* Reset time played. This method used
  || along with .pause() is equivelant to "stop"
  */
  vid.currentTime = 0;

  // Simulate a `non-playing state`
  vid.classList.remove('playing');

  /* Delay the call to remove vid in order
  || to preserve the fade ouyt effect.
  */
  setTimeout(function() {
    document.body.removeChild(vid);
  }, 2000);
}, false);

video.playing {
  opacity: 1;
  transition: opacity 3s ease;
}

video {
  opacity: 0;
  transition: opacity 3s ease;
}

Answer 2

你可以使用html＆＃34; autoplay＆＃34;一旦页面加载就播放视频的属性。

<div id="video">
<video width="100%" height="auto" autoplay="autoplay">
  <source src="monarch.mp4" type='video/mp4; codecs="avc1.42E01E, mp4a.40.2"'>
  <source src="monarch.ogv" type='video/ogg; codecs="theora, vorbis"'>
</video>
</div>

然后使用jquery在播放后淡出vedio，如下所示，

$('#video video').bind('ended', function(){
   $(this).parent().fadeOut()
});

在这里为你创造了一个小提琴：https://jsfiddle.net/Safoora/ddukpcbd/1/ 希望它会有所帮助。

Answer 3

我以不同的方式解决了这个问题：

index.html是视频片段，在视频结束后，我使用下面的代码使视频消失并移至主页home.html

<meta http-equiv="Refresh" content="9;url=home.html"

index.html中包含2个javascript if语句，如果屏幕宽度小于600像素，则立即重定向到home.html，因为手机不会自动播放视频。 2个类似的if语句用于确保if语句在尽可能多的浏览器中工作。以下是使用的if语句：

<script type="text/javascript">
<!--
if (screen.width <= 600) {
window.location = "home.html";
}
//-->
</script>
<script type="text/javascript">
<!--
if (window.innerWidth <= 600) {
document.location = "home.html";
}
//-->
</script>

最初我问了这个问题，因为我希望视频在每次访问网站时只播放一次，并将视频保留在与主页相同的html页面中，而不是像我现在有了。 Jquery 一个不会实现这一点，因为这会使每个页面加载一次视频播放，而不是每次访问网站一次。但是，会话cookie或javascript会话存储等其他方法可能会将此视频功能保留在同一页面中。但是这个解决方案很好地解决了这个问题，因此我使用了这种方法。

为了进一步改善这一点，我添加了一个事件监听器，仅在视频结束时移动到下一页，而不是像这样的9秒：

<meta http-equiv="Refresh" content="9;url=home.html"

但仅在结束时（如果浏览器加载速度慢且9秒还不够）

<script>
video=document.getElementById('myvid').addEventListener('ended',function(){
window.location.href='home.html';
});
</script>

上面的Javascript假定视频的id =“myvid”

获取HTML5视频，在页面加载时播放一次，然后逐渐淡出

3 个答案: