Нужно выяснить logi c с автовоспроизведением видео. HTML, JS, видео. js, PHP - PullRequest
Новая
       108

Нужно выяснить logi c с автовоспроизведением видео. HTML, JS, видео. js, PHP

0 голосов
/ 13 июля 2020

tl; dr вы можете прочитать краткое содержание вопроса в конце.

Мне нужно автовоспроизведение со звуком на моем сайте после согласия пользователя. Вот пример (извините, сайт на итальянском), где он реализован в прокрутке, что согласуется с политикой Cook ie и автовоспроизведения видео, но я хотел бы получить соглашение о клике (пользователь нажимает кнопку согласен).
Суть в том, чтобы попросить пользователя о согласии при первом посещении, а затем автоматически воспроизвести видео без запроса подтверждения. В приведенном выше примере он работает почти всегда, так как мне нужно, чтобы он работал, но я не могу понять, как они это сделали, пожалуйста, помогите мне понять этот logi c.
Я знаю о политике Google в отношении автовоспроизведения мультимедиа, поэтому мне нужно, чтобы пользователь согласился перед автовоспроизведением видео, как в приведенном выше примере.

У меня есть этот код: 

<video id="video" preload="auto" playsinline controls>
    <source src="http://commondatastorage.googleapis.com/gtv-videos-bucket/sample/BigBuckBunny.mp4" type="video/mp4">
</video>

и этот код в JS (с использованием видео. js и jQuery): 

var videoPlayer = videojs('video');
videoPlayer.ready(function() {
    var promise = videoPlayer.play();
});

Резюме:
Основная цель - выяснить, как работает автовоспроизведение со звуком (как его реализовать) на примере example (извините, сайт на итальянском). Это работает следующим образом: когда пользователь заходит на сайт в первый раз, он получает уведомление, в котором пользователю сообщается, что сайт использует файлы cookie, а затем, если пользователь прокручивает или щелкает по сайту, автовоспроизведение со звуком работает в текущем сеансе и во всех последующих сеансах. в этом домене. Мне нужна ваша помощь в выяснении того, как можно реализовать этот лог c.

Ответы [ 2 ]

0 голосов
/ 13 июля 2020

Я не думаю, что это возможно. Сначала сайт должен пройти MEI.

https://developers.google.com/web/updates/2017/09/autoplay-policy-changes#mei

0 голосов
/ 13 июля 2020

Вы можете вставить тег источника в тег видео после того, как пользователь нажмет кнопку соглашения. html не будет загружен раньше, поэтому у вас нет контента Google на вашем сайте. 

$(document).ready(function(){
    $("#enableGoogleContentButton").on("click", function(){
       $("#video").append('<source src="http://commondatastorage.googleapis.com/gtv-videos-bucket/sample/BigBuckBunny.mp4" type="video/mp4">')
    });
});


<video id="video" preload="auto" playsinline controls>
   
   <!--empty-->
</video>


...

<button id="enableGoogleContentButton"> enable Google Content </button>

Пример также будет работать с Vanilla JS (I ' я не уверен, понял ли я ваш вопрос, извините, если я не понял)

edit

Вы можете сохранить информацию о прошлом клике в cookie / localstorage 

$(document).ready(function(){
if(localstorage.cookieaccept=""){
//if there's no cookie set yet
    $("#enableGoogleContentButton").on("click", function(){
//test for click
       $("#video").append('<source src="http://commondatastorage.googleapis.com/gtv-videos-bucket/sample/BigBuckBunny.mp4" type="video/mp4">');
//set the local storage "cookieaccept" to true
localstorage.cookieaccept="true";
$("#enableGoogleContentButton").remove()
//remove the "enable content"-button
    });
$("document").on("scroll", function(){
//or scroll
       $("#video").append('<source src="http://commondatastorage.googleapis.com/gtv-videos-bucket/sample/BigBuckBunny.mp4" type="video/mp4">');
//set the local storage "cookieaccept" to true
localstorage.cookieaccept="true";
$("#enableGoogleContentButton").remove()
//remove the "enable content"-button

    });
}
else{
//if cookie is already set, add the video
$("#video").append('<source src="http://commondatastorage.googleapis.com/gtv-videos-bucket/sample/BigBuckBunny.mp4" type="video/mp4">')
    $("#enableGoogleContentButton").remove()
//remove the "enable content"-button

}
});

Надеюсь, это будет соответствовать вашим требованиям

...