如何调整此javascript代码，以便视频每次访问网站时只播放一次？ [英] How do I adjust this javascript code so that the video only ever plays once per website visit?
问题描述
我正在帮助一个朋友建立一个网站，并且是一个使用javascript的新手，所以可以提供一些帮助。我已经在这里进行了研究，看到之前已经提出了一些类似的问题，但是想知道如何将这个问题与我的代码联系起来。到目前为止，此代码运行良好，当您加载主页时，如果窗口宽度超过600px，视频剪辑将运行，但如果窗口小于600像素，则视频剪辑不会运行。此外，其他javascript使视频一旦播放就会消失。然而我遇到的问题是，如果你去网站上的另一个页面，然后回到主页，视频一次又一次地播放，但我希望视频在访问者到达网站时只播放一次。任何人都可以建议我如何编辑代码，以便视频每次访问只运行一次？所有相关代码如下：
window.addEventListener（'load'，function（）{
if（window.innerWidth> = 600）{
var vid = document.getElementById（'video'）;
var wrap = document.getElementById（'videowrapper'）;
wrap.classList.toggle（'hide'）;
vid.play（）;
vid.addEventListener（'ends'，function（e）{
wrap.classList.toggle（'hide'）;
}） ;
}
}）
I am helping a friend make a website and am a novice with javascript so could do with a little help. I have researched on here and see that some similar questions have been asked before but would like to know exactly how to relate this back to my code. So far this code works well, when you load up the homepage, the video clip runs IF the window is wider than 600px, but the video clip doesn't run if the window is less than 600 pixels. Also the other javascript makes the video disappear once it's played. However the problem I have is if you go to another page on the site, and then back to the home page, the video plays again and again, but I want the video to play only once when the visitor arrives to the site. Could anyone advise how I would edit the code so that the video only runs once per visit? All relevant code is below:
window.addEventListener('load', function() {
if (window.innerWidth >= 600) {
var vid = document.getElementById('video');
var wrap = document.getElementById('videowrapper');
wrap.classList.toggle('hide');
vid.play();
vid.addEventListener('ended',function(e) {
wrap.classList.toggle('hide');
});
}
})
< source src =clip.mp4type =video / mp4>
您的浏览器不支持HTML5视频。
<source src="clip.mp4" type="video/mp4">
Your browser does not support HTML5 video.
document.getElementById（'video'）。addEventListener（'ended'，myHandler，false ）;
函数myHandler（e）{
if（！e）{ e = window.event; }
//活动结束后你想做什么
document.getElementById（'video'）。style.display =none ;
document.getElementById（'videoEnd'）。style.display =none;
}
< meta charset =utf-8>
< meta name =viewportcontent =width = device-width，initial-scale = 1.0>
我尝试了什么：
我在stackoverflow上问过这个问题，一个用户使用本地存储粘贴在这个答案中，但它不起作用，但也许需要调整？用户粘贴的答案如下：
window.addEventListener（'load'，function（）{
if（window.innerWidth） > = 600&& localStorage.getItem（playing）=== null）{
var vid = document.getElementById（'video'）;
var wrap = document.getElementById（'videowrapper'）;
wrap.classList.toggle（'hide'）;
vid.play （）;
vid.addEventListener（'ends'，function（e）{
wrap.classList.toggle（'hide'）;
localStorage.setItem（play，true）
}）;
}
}）
document.getElementById('video').addEventListener('ended',myHandler,false);
function myHandler(e) {
if(!e) { e = window.event; }
// What you want to do after the event
document.getElementById('video').style.display="none";
document.getElementById('videoEnd').style.display="none";
}
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
What I have tried:
I asked this question on stackoverflow, one user pasted in this answer using local storage, however it doesn't work, but maybe it needs adjustment? The answer the user pasted in is below:
window.addEventListener('load', function() {
if (window.innerWidth >= 600 && localStorage.getItem("played") === null) {
var vid = document.getElementById('video');
var wrap = document.getElementById('videowrapper');
wrap.classList.toggle('hide');
vid.play();
vid.addEventListener('ended', function(e) {
wrap.classList.toggle('hide');
localStorage.setItem("played", true)
});
}
})
推荐答案
嗨理查德，在导航到另一个页面之前，我确实等待视频完成加载。我在下面使用cookie有这个解决方案，但问题是此解决方案现在导致视频播放前延迟5秒。
函数setCookie（cookieName，cookieValue，expireDays，isGlobal）{
var expireDate = new Date（ ）;
expireDate.setTime（expireDate.getTime（）+（expireDays * 24 * 60 * 60 * 1000））;
var expires =expires =+ expireDate .toUTCString（）;
if（isGlobal）{
document.cookie = cookieName +=+ cookieValue +;+ expires +; path = /;
}否则{
document.cookie = cookieName +=+ cookieValue +;+ expires;
}
}
函数getCookie（cookieName）{
var name = cookieName +=;
var ca = document.cookie.split（';'）;
for（var i = 0; i& lt; ca.length; i ++）{
var c = ca [i];
while（c.charAt（0）==''）c = c.substring（1）;
if（c.indexOf（name）== 0）返回c.substring（name.length，c.length）;
}
返回;
}
函数checkCookie（cookieName）{
if（getCookie（cookieName） ！=）{
返回true;
}否则{
返回false;
}
}
window.addEventListener （'load'，function（）{
if（window.innerWidth> = 600）{
var vid = document.getElementById（'video'）;
var wrap = document.getElementById（'videowrapper'）;
wrap.classList.toggle（'hide'）;
//检查cookie是否它已被删除（[检查Cookie函数的值]）
if（！checkCookie（'visited'））
{
//设置cookie并播放视频
setCookie（访问，1,3，FALSE）;
vid.play（）;
}
其他
{
//隐藏视频而我们不播放
wrap.classList.toggle（'hide'）;
document.getElementById（'video'）。style.display =none;
document.getElementById（'videoEnd'）。style.display =none;
}
vid.addEventListener（'ends'，function（e）{
wrap.classList.toggle（'hide'）;
}）;
}
}）
$ / b
$ / b
document.getElementById（'video'）。addEventListener（'ended'，myHandler，false）;
函数myHandler（e）{
if（！e）{e = window.event; }
//活动结束后你想做什么
document.getElementById（'video'）。style.display =none ;
document.getElementById（'videoEnd'）。style.display =none;
}
Hi Richard, I did wait for the video to finish loading before I navigated to another page. I have this solution below using cookies, but the issue is this solution has now caused a delay of 5 seconds before the video plays.
function setCookie(cookieName, cookieValue, expireDays,isGlobal) {
var expireDate = new Date();
expireDate.setTime(expireDate.getTime() + (expireDays*24*60*60*1000));
var expires = "expires="+expireDate.toUTCString();
if(isGlobal){
document.cookie = cookieName + "=" + cookieValue + "; " + expires+"; path=/";
}else{
document.cookie = cookieName + "=" + cookieValue + "; " + expires;
}
}
function getCookie(cookieName) {
var name = cookieName + "=";
var ca = document.cookie.split(';');
for(var i=0; i<ca.length; i++) {
var c = ca[i];
while (c.charAt(0)==' ') c = c.substring(1);
if (c.indexOf(name) == 0) return c.substring(name.length, c.length);
}
return "";
}
function checkCookie(cookieName) {
if (getCookie(cookieName) != "") {
return true;
} else {
return false;
}
}
window.addEventListener('load', function() {
if (window.innerWidth >= 600) {
var vid = document.getElementById('video');
var wrap = document.getElementById('videowrapper');
wrap.classList.toggle('hide');
//Check cookie if it has been vistied or not ([CHECK Cookie Function for the value])
if(!checkCookie('visited'))
{
//Set the cookie and play the video
setCookie('visited',1,3,false);
vid.play();
}
else
{
//Hide the video and we don't play it
wrap.classList.toggle('hide');
document.getElementById('video').style.display="none";
document.getElementById('videoEnd').style.display="none";
}
vid.addEventListener('ended',function(e) {
wrap.classList.toggle('hide');
});
}
})
document.getElementById('video').addEventListener('ended',myHandler,false);
function myHandler(e) {
if(!e) { e = window.event; }
// What you want to do after the event
document.getElementById('video').style.display="none";
document.getElementById('videoEnd').style.display="none";
}
这篇关于如何调整此javascript代码，以便视频每次访问网站时只播放一次？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
