Javascript 在页面加载时播放一次HTML5视频，然后淡出
我试图让HTML5剪辑在第一次到达/页面加载到主页时只播放一次，然后不再播放。另外，我希望视频在播放后逐渐消失。我知道您可以使用JQuery一次性完成这项工作，但我是一名初学者，我正在努力学习语法。一个更有经验的程序员能帮我调整我的代码，让它工作吗？这是我到目前为止所拥有的Javascript 在页面加载时播放一次HTML5视频，然后淡出,javascript,jquery,Javascript,Jquery,我试图让HTML5剪辑在第一次到达/页面加载到主页时只播放一次，然后不再播放。另外，我希望视频在播放后逐渐消失。我知道您可以使用JQuery一次性完成这项工作，但我是一名初学者，我正在努力学习语法。一个更有经验的程序员能帮我调整我的代码，让它工作吗？这是我到目前为止所拥有的 <!DOCTYPE html> <html> <head> <script src="jquery-3.2.0.min.js"></script> <scri
<!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>
$（文档）.ready（函数（）{
$（“#视频”）.1（“加载”，函数（）{
$（“#视频”）.get（0.play（）
});
这是一个网站
您的浏览器不支持HTML5视频。
<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>
希望能有所帮助。我用另一种方式解决了这个问题： index.html是视频剪辑，视频结束后，我使用下面的代码使视频消失并移动到主页home.html
<meta http-equiv="Refresh" content="9;url=home.html"
更新
OP请求视频的状态是持久的。我建议使用Cookie或localStorage
。以下更新托管在片段上，但不在片段上，因为有严格的安全措施禁止使用localStorage
演示有一个基本流程，您应该首先遵循：
初始页面加载时，视频播放，控制台显示：
缓存设置为：已播放
视频结束并淡出后，重新加载页面。请注意，视频不再显示，也不再播放。控制台现在显示：
缓存是：播放的
重新加载页面数次，页面将不会更改
如果您需要将页面恢复到其原始状态，我添加了一个删除缓存按钮，该按钮删除了存储负责将页面保持在视频播放后状态的信息的特定键
单击删除缓存按钮后，控制台应显示：
未定义
这意味着缓存已成功删除。详细信息在
动态创建一个
，并在结束时将其从DOM中删除。详细信息在代码段中注释
片段
//创建和引用视频元素
var vid=document.createElement（'video'）；
//为样式添加类
vid.classList.add（'playing'）；
//将src添加到.vid
vid.src=http://media6000.dropshots.com/photos/1381926/20170326/023642.mp4';
//加载，视频
参阅load（）；
//将.vid添加到正文中
文件.正文.附件（vid）；
//播放视频
视频播放（）；
/*将结束事件注册到vid
||视频结束后。。。
*/
参见addEventListener（'ended'，函数（e）{
//暂停录像
参阅暂停
/*重置播放时间。使用此方法
||与.pause（）一词等价于“stop”
*/
vid.currentTime=0；
//模拟“非播放状态”`
vid.classList.remove（'playing'）；
/*按顺序延迟删除视频的调用
||以保持淡入淡出效果。
*/
setTimeout（函数（）{
文件.body.removeChild（vid）；
}, 2000);
}，false）；
video.playing{
不透明度：1；
过渡期：轻松；
}
录像带{
不透明度：0；
过渡期：轻松；
}
感谢您的输入techhunter，我让您的代码正常工作了，但只有当我将jquery放在html页面的正文部分时，由于某种原因，当代码位于标题部分时，它才正常工作。在上面的jquery之前，添加$。（document）。on（ready，function（）{//over jquery code}）；zer00ne，有趣的是，您的代码是否使视频在每次访问网站时也只运行一次？这就是目标，运行一次，然后逐渐消失为不可见。在每次会话中运行一次？或者在清理浏览器之前运行一次？这类似于jQuery方法one（）
如您在问题中所述。如果您想要持久的行为，那么还需要cookies或localStorage。每次访问站点一次-是的，cookies或local storage，这是我将来可以阅读的内容。感谢您发布的zer00nezer00ne，您所做的plunker，它只播放视频一次，然后消失看起来很好，做得很好。@watchglass49谢谢您，先生。如果您想将状态重置为原始状态，只需单击“删除缓存”
按钮。如果这解决了您的问题，请检查✔ 这篇文章的主题。快乐编码。
<meta http-equiv="Refresh" content="9;url=home.html"
<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>
<meta http-equiv="Refresh" content="9;url=home.html"
<script>
video=document.getElementById('myvid').addEventListener('ended',function(){
window.location.href='home.html';
});
</script>