如何在HTML中每次重新加载页面时打开新视频
在HTML中，可以通过使用<video>标签来嵌入视频，并通过设置autoplay属性来实现每次重新加载页面时打开新视频的效果。
以下是一个示例代码：
<!DOCTYPE html>
<html>
<head>
<title>Open New Video on Page Reload</title>
</head>
<body>
<video autoplay controls>
<source src="video1.mp4" type="video/mp4">
</video>
<script>
window.onload = function() {
var video = document.querySelector('video');
var sources = video.getElementsByTagName('source');
// 获取当前视频的索引
var currentIndex = 0;
if (localStorage.getItem('videoIndex')) {
currentIndex = parseInt(localStorage.getItem('videoIndex'));
}
// 定义视频列表
var videoList = [
{ src: 'video1.mp4', type: 'video/mp4' },
{ src: 'video2.mp4', type: 'video/mp4' },
{ src: 'video3.mp4', type: 'video/mp4' }
];
// 设置下一个视频的索引
var nextIndex = (currentIndex + 1) % videoList.length;
// 更新视频源
sources[0].src = videoList[nextIndex].src;
sources[0].type = videoList[nextIndex].type;
// 保存下一个视频的索引
localStorage.setItem('videoIndex', nextIndex);
// 加载新视频
video.load();
};
</script>
</body>
</html>在上述代码中，我们使用了<video>标签来嵌入视频，并设置了autoplay属性，以便在页面加载时自动播放视频。通过JavaScript代码，我们实现了每次重新加载页面时打开新视频的逻辑。
在JavaScript代码中，我们定义了一个视频列表videoList，其中包含了多个视频的源文件路径和类型。通过使用localStorage来保存当前播放视频的索引，以便在页面重新加载时能够获取到下一个视频的索引。然后，我们根据下一个视频的索引更新<video>标签中的源文件路径和类型，并调用load()方法来加载新视频。
请注意，上述示例代码中并未提及任何特定的云计算品牌商或产品。如果您需要使用特定的云计算服务来存储和传输视频文件，您可以根据您的需求选择适合的云计算服务提供商，并使用其相关产品来实现视频的存储和传输。
相关·内容
我在我的网页上应用了视频背景，做了所有的样式，看起来很酷，但是我怎么能在每次重新加载HTML页面的时候都改变它呢？
浏览 47提问于2021-09-18得票数 0
我试图在MERN SPA中实现社交登录功能，这样用户就可以使用他们的Google/Facebook/Twitter/等等登录到我的站点。但是，对于我试图实现的流程(下面描述)，我无法思考如何在不导致用户代理刷新和丢失状态的情况下处理身份提供程序的重定向。我遇到的问题是在第2步，因为这个步骤会导致浏览器重新加载我的SPA，所以React组件中的状态会被清除。我可以使用localStorage部分地解决这个问题，但这增加了复杂性。在不需要浏览器重新加载<
浏览 6提问于2022-06-30得票数 3
我已经用支持HTML5和JS的JavaFX创建了一个web浏览器，但是我不能看videos.What，我可以做些什么来集成一个flash播放器插件到我的浏览器中吗？
浏览 32提问于2016-07-23得票数 0
回答已采纳
我正在尝试使用一个名为的包从页面中抓取视频，但是当页面加载时，该视频不会立即呈现，因此当我获得该页面的html代码时，video标记并不存在，但是如果我在浏览器中打开该页面并进行检查，它就会存在。如何在抓取视频之前等待页面加载视频？
浏览 7提问于2018-07-21得票数 0
1回答
在Chrome中，当使用给定的<video>创建<source>时，视频只加载一次，然后任何随后创建的具有相同<source>的<video>元素都会使用内存中的视频(如预期的那样)。在Safari (12.0)上，即使视频已经在内存中，每次都会重新加载具有相同源的新视频！
source.src
浏览 0提问于2018-10-10得票数 5
我有一个html页面A和一个链接在页面中，打开页面B在一个新的窗口。如何在点击和打开该链接时重新加载页面A？我应该说得更清楚些。B页在新窗口中打开，而不是以弹出窗口的形式打开。如何确保页面A的重新加载等待到新窗口(B页)中打开的<
浏览 4提问于2009-01-02得票数 0
我有一个包含客户端信息的页面，当我用另一个客户端的id打开一个新页面时，我重新加载该页面，我将获得相同的信息。会话在页面之间共享。浏览器是IE。
如何在每次打开新浏览器选项卡时强制创建新会话？
浏览 1提问于2016-08-27得票数 0
2回答
设置：
因为它是AS2，所以很难做到这一点。我的想法是，我可以创建一个PHP页面，每次播放器加载到任何网站时都应该打开它；然后flash播放器可以对PHP文件执行"geturl“操作，其中包含了代码或其他一些像样的跟踪器。g
浏览 6提问于2010-02-19得票数 1
回答已采纳
目前，我使用与弹出窗口(browser_action)和背景相同的页面： "page": "popup/index.html" "default_title": "Indexer",
"default_popup":
浏览 2提问于2016-12-22得票数 0
回答已采纳
1回答
我需要打开一个新的页面时，从Youtube嵌入的视频是播放点击图像。最好的选择是在视频应该在的位置加载一个图像，然后单击将该图像替换为视频开始播放。对于最后一个，我已经检查了几个帖子(见下文)。如何在新页面中播放视频？
提前感谢
浏览 70提问于2018-06-29得票数 0
回答已采纳
我有一些html5视频元素，它们的预加载属性设置为"auto“。它们开始加载得很好，但我认为它们的缓存可能有问题，因为每次我重新加载页面(没有清除缓存)时，它们都会重新开始。当我检查firebug中的Network面板时，我注意到其他所有内容(图像和文件)都显示了预期的"304 not modified“消息，而视频(和音频)文件以重复的条目显
浏览 13提问于2012-03-18得票数 17
回答已采纳
1回答
每次强制浏览器重新加载小程序
、、、、
目前，当我刷新我的页面(包含小程序)时，浏览器尝试重新加载较旧的小程序，这会导致小程序无响应等复杂问题。我想强制重新加载小程序，从服务器，而不是从浏览器缓存，每次我刷新页面，这也没有任何手动工作(如关闭/重新打开浏览器或手动浏览器缓存删除)。有没有办法实现它，任何要传递到runApplet(...)中的属性或参数？( 中的函数)，使用javascript
浏览 3提问于2011-10-05得票数 3
回答已采纳
我正在使用的脚本将JSON数据(在我的例子中是加密货币价格)导入到google sheets中。但是，我注意到当我重新加载工作表时，我使用的ImportJSON函数并不总是被调用，所以我不知道我是否拥有最后的数据。大约一半的时间我得到新的数据，另一半的时间我保留旧的数据。我用来加载新数据的技巧是编辑脚本，将ImportJSON重命名为其他名称，使电子表格失败，然后撤消更改，然后调用ImportJSON。然而，这相当单调乏味。有没有办法让google s
浏览 2提问于2018-01-09得票数 0
我有一个场景，我有两个html页面。在两个html页面上，我都有其他html页面的链接。所以我的要求是: 1.当我打开第一个超文本标记语言页面，并点击链接到HTML2，新的标签应该在同一窗口中打开。HTML2页面有HTML1的链接。所以当我点击HTML1时。在tab1中已经打开</em
浏览 0提问于2019-01-29得票数 1
此实时预览位于iframe中，每次用户更改CodeMirror编辑器中的任何内容时都会更新。问题是，当预览更新iframe中的整个文档时，iframe将被替换。所以它基本上是在每次你按一个键的时候重新加载整个网页。这不是很有效，使整个应用程序运行缓慢。这也是一个问题，当您添加任何嵌入式媒体，如Youtube视频到您的文档，因为它将重新加载该视频<
浏览 2提问于2014-01-30得票数 0
我正在开发一个铬扩展名，它使用contentscript.js文件中youtube页面中的ytplayer对象。在过去，ytplayer对象每次导航到一个新的youtube视频时都会更新。如何复制
捕获ytplayer.config.args问题是，在导航到另一个<em
浏览 0提问于2019-02-09得票数 2
回答已采纳
：我有一个简单的HTML页面，它有一个普通的脚本标记，如下所示加载html后，我更新main.js，并重新加载(通过UI Button)问题--我的新JS没有被接受，我必须关闭应用程序并再次打开它。我尝试过的是：-not使用webEngine.reload()，但是webEngine.load()每次重新</
浏览 5提问于2013-04-25得票数 5
回答已采纳
1回答
如果我一个接一个地发出大约8个请求，它们就会加载得很好，但是在那之后的任何一个都只会说“挂起”。<!DOCTYPE html> <head> <title>Editing Quiz</title>
<script<a href="#/demos/QuizDemo&
浏览 0提问于2015-06-24得票数 1
回答已采纳
扫码
添加站长 进交流群
领取专属 10元无门槛券
手把手带您无忧上云
相关资讯
热门标签
云服务器
ICP备案
实时音视频
对象存储
即时通信 IM活动推荐
腾讯云开发者
