La lecture automatique des vidéos ne fonctionne pas dans les navigateurs de bureau Safari et Chrome.

Question

J'ai passé beaucoup de temps à essayer de comprendre pourquoi la vidéo était intégrée comme ici :

<video height="256" loop autoplay muted controls id="vid">
         <source type="video/mp4" src="video_file.mp4"></source>
         <source type="video/ogg" src="video_file.ogg"></source>
</video>

démarre automatiquement une fois que la page est chargée dans FireFox mais ne peut pas faire de lecture automatique dans les navigateurs basés sur Webkit. Cela ne s'est produit que sur certaines pages aléatoires. Jusqu'à présent, je n'ai pas réussi à en trouver la cause. Je soupçonne des balises non fermées ou des JS étendus créés par des éditeurs de CMS.

Answer 1

J'ai eu un cas où cela avait quelque chose à voir avec l'ordre des différents types de fichiers. Essayez de le changer et voyez si cela aide.

Answer 2

J'ai commencé par lire toutes les vidéos visibles, mais les vieux téléphones ne fonctionnaient pas bien. Donc, actuellement, je lis la vidéo la plus proche du centre de la fenêtre et je mets les autres en pause. Vanilla JS. Vous pouvez choisir l'algorithme que vous préférez.

//slowLooper(playAllVisibleVideos);
slowLooper(playVideoClosestToCenter);

function isVideoPlaying(elem) {
    if (elem.paused || elem.ended || elem.readyState < 2) {
        return false;
    } else {
        return true;
    }
}
function isScrolledIntoView(el) {
    var elementTop = el.getBoundingClientRect().top;
    var elementBottom = el.getBoundingClientRect().bottom;
    var isVisible = elementTop < window.innerHeight && elementBottom >= 0;
    return isVisible;
}
function playVideoClosestToCenter() {
    var vids = document.querySelectorAll('video');
    var smallestDistance = null;
    var smallestDistanceI = null;
    for (var i = 0; i < vids.length; i++) {
        var el = vids[i];
        var elementTop = el.getBoundingClientRect().top;
        var elementBottom = el.getBoundingClientRect().bottom;
        var elementCenter = (elementBottom + elementTop) / 2.0;
        var windowCenter = window.innerHeight / 2.0;
        var distance = Math.abs(windowCenter - elementCenter);
        if (smallestDistance === null || distance < smallestDistance) {
            smallestDistance = distance;
            smallestDistanceI = i;
        }
    }
    if (smallestDistanceI !== null) {
        vids[smallestDistanceI].play();
        for (var i = 0; i < vids.length; i++) {
            if (i !== smallestDistanceI) {
                vids[i].pause();
            }
        }
    }
}
function playAllVisibleVideos(timestamp) {
    // This fixes autoplay for safari
    var vids = document.querySelectorAll('video');
    for (var i = 0; i < vids.length; i++) {
        if (isVideoPlaying(vids[i]) && !isScrolledIntoView(vids[i])) {
            vids[i].pause();
        }
        if (!isVideoPlaying(vids[i]) && isScrolledIntoView(vids[i])) {
            vids[i].play();
        }
    }
}
function slowLooper(cb) {
    // Throttling requestAnimationFrame to a few fps so we don't waste cpu on this
    // We could have listened to scroll+resize+load events which move elements
    // but that would have been more complicated.
    function repeats() {
        cb();
        setTimeout(function() {
            window.requestAnimationFrame(repeats);
        }, 200);
    }
    repeats();
}

Answer 3

J'ai résolu le même problème avec,

$(window).on('pageshow',function(){
    var vids = document.querySelectorAll('video');
    for (var i = 0; i < vids.length;){
        vids[i].play();
    }
})

Vous devez lancer les vidéos après l'affichage de la page.

Answer 4

Essayez ceci, c'est simple et court et cela fonctionne avec mon code alors que j'ai la vidéo en plein écran et derrière les autres éléments j'utilise simplement z-index -1 ;

    <video autoplay loop id="myVideo">

Answer 5

Dans React + Chrome, il est préférable d'importer la vidéo que de la donner comme src à .

import React from 'react';
import styled from 'styled-components';
import video from './videos.mp4';
const StyledVideo = styled.video`
width: 100%;
height: 100vh;
object-fit: cover;
`
const BackgroundVideo = () => {
return (
    <StyledVideo autoPlay loop muted>
        <source src={video} type="video/mp4" />
    </StyledVideo>
);
}

Souvenez-vous de

• La vidéo est dans le même répertoire, pour l'importer.
• Pour lire automatiquement la vidéo en arrière-plan, utilisez autoPlay y en sourdine Les accessoires sont là.