Member 13094319 Ответов: 1

Как настроить этот javascript-код так, чтобы видео воспроизводилось только один раз за посещение веб-сайта?


Я помогаю другу создать веб-сайт, и я новичок в использовании javascript, поэтому мог бы справиться с небольшой помощью. Я исследовал здесь и вижу, что некоторые похожие вопросы задавались раньше, но я хотел бы точно знать, как связать это с моим кодом. Пока этот код работает хорошо, когда вы загружаете домашнюю страницу, видеоклип запускается, ЕСЛИ окно шире 600 пикселей, но видеоклип не запускается, если размер окна меньше 600 пикселей. Также другой javascript заставляет видео исчезать после воспроизведения. Однако у меня есть проблема: если вы перейдете на другую страницу сайта, а затем вернетесь на домашнюю страницу, видео будет воспроизводиться снова и снова, но я хочу, чтобы видео воспроизводилось только один раз, когда посетитель приходит на сайт. Может ли кто-нибудь посоветовать, как бы отредактировать код, чтобы видео запускалось только один раз за посещение? Весь соответствующий код приведен ниже:



window. addEventListener ('load', функция() {
if (window. innerWidth >= 600) {
var vid = document. getElementById ('video');
var wrap = document. getElementById ('videowrapper');
обертывание.classList.переключение('спрятать');

вид.играть();
vid. addEventListener ('ended', function (e) {
обертывание.classList.переключение('спрятать');
});
}
})




&ЛТ;источник СРЦ="клип.МР4" тип="видео/МР4"и GT;
Ваш браузер не поддерживает HTML5-Видео.

Крис Представляет





документ.метода getElementById ("видео").метода addEventListener('состава',myHandler,ложные);
функция myHandler(e) {
if (! e) { e = window. event; }

// Что вы хотите сделать после мероприятия
документ.метода getElementById ("видео").стиль.дисплей="никто";
document.getElementById ('videoEnd'). style. display= " none";
}

<meta charset= "utf-8">

в <мета имя="область просмотра" содержимого="ширина=устройство-ширина, начально-масштаб=1.0"&ГТ;





Что я уже пробовал:

Я задал этот вопрос на stackoverflow, один пользователь вставил этот ответ с помощью локального хранилища, однако он не работает, но, может быть, он нуждается в корректировке? Ответ, который вставил пользователь, приведен ниже:

window. addEventListener ('load', функция() {
если (окна.расстояние между &ГТ;= 600 усилитель и;&Ампер; хранилище localStorage.метод getitem("играли") === значение null) {
var vid = document. getElementById ('video');
var wrap = document. getElementById ('videowrapper');
обертывание.classList.переключение('спрятать');

вид.играть();
vid. addEventListener ('ended', function (e) {
обертывание.classList.переключение('спрятать');
localStorage. setItem ("сыграно", true)
});
}
})

F-ES Sitecore

Локальное хранилище еще не полностью реализовано во всех браузерах, альтернативой является использование файлов cookie, которые имеют почти такой же эффект. Проблема в том, что пользователь всегда может удалить свои файлы cookie, чтобы снова увидеть видео, или очистить свое локальное хранилище, если вы идете по этому пути. Вы ничего не можете сделать, чтобы остановить это на самом деле, поскольку сеть не имеет гражданства, нет никакого способа навсегда запомнить что-либо о вас.

Richard Deeming

Opera Mini, похоже, единственный браузер, который сейчас не поддерживает локальное хранилище:
http://caniuse.com/#feat=namevalue-storage[^]

Даже IE8 поддерживает его, Хотя, как обычно, в IE есть несколько "известных проблем".

F-ES Sitecore

Да, так что это не полностью реализовано во всех браузерах...что я и сказал....

Richard Deeming

Ну, Opera Mini вообще не поддерживает Javascript. Вы не можете избежать всех современных технологий из-за одного упрямого браузера с < 3,5% доли мирового рынка. :)

F-ES Sitecore

Старые версии IE также не очень хороши в своей поддержке, и если вы хотите нацелиться на 100% клиентов, то эти вещи имеют значение.

Richard Deeming

Когда вы тестировали решение из StackOverflow, вы ждали, пока видео закончит воспроизводиться и исчезнет, прежде чем перейти на другую страницу?

1 Ответов

Рейтинг:
7

Member 13094319

Привет, Ричард, я действительно подождал, пока видео закончит загружаться, прежде чем перейти на другую страницу. У меня есть это решение ниже с использованием файлов cookie, но проблема в том, что это решение теперь вызвало задержку в 5 секунд до воспроизведения видео.


функция setCookie(cookieName, cookieValue, expireDays,isGlobal) {
var expireDate = новая дата();
expireDate. setTime(expireDate. getTime () + (expireDays*24*60*60*1000));
ВАР истекает = "истекает="+описании параметров expiredate.toUTCString();
if (isGlobal){
document. cookie = cookieName + " = " + cookieValue +";"+ expires+"; path=/";
}еще{
документ.печенье = cookieName + "=" + cookieValue + "; " + истекает;
}
}

функция getCookie(cookieName) {
var name = cookieName +" =";
ВАР-ка = документ.печенье.сплит(';');
для(ВАР я=0; я&амп;ЛТ;ок. длина; я++) {
var c = ca[i];
в то время как (гр.используя метод charat(0)==' ') С = с.подстрока(1);
если (гр.метод indexOf(имя) == 0) вернуться В. подстрока(наименование.длина, c. длина);
}
вернуть "";
}

функция checkCookie(cookieName) {

if (getCookie(cookieName)! = "") {
вернуть true;
} еще {
возвращать false;
}
}




window. addEventListener ('load', функция() {
if (window. innerWidth >= 600) {
var vid = document. getElementById ('video');
var wrap = document. getElementById ('videowrapper');
обертывание.classList.переключение('спрятать');
//Проверяем куки, если он уже посетили или нет ([функция проверки файлов cookie значение])
if (! checkCookie ('visited'))
{
// Установите файл cookie и воспроизведите видео
setCookie ('visited', 1,3, false);
вид.играть();
}
ещё
{
// Спрячьте видео, и мы его не будем воспроизводить
обертывание.classList.переключение('спрятать');
документ.метода getElementById ("видео").стиль.дисплей="никто";
document.getElementById ('videoEnd'). style. display= " none";
}
vid. addEventListener ('ended', function (e) {
обертывание.classList.переключение('спрятать');
});
}
})











документ.метода getElementById ("видео").метода addEventListener('состава',myHandler,ложные);
функция myHandler(e) {
if (! e) { e = window. event; }

// Что вы хотите сделать после мероприятия
документ.метода getElementById ("видео").стиль.дисплей="никто";
document.getElementById ('videoEnd'). style. display= " none";
}