En HTML5, définissez ou renvoyez l'attribut de lecture automatique indiquant si la lecture audio et vidéo commencera après le chargement.-Tutoriel H5-php.cn

En HTML5, définissez ou renvoyez l'attribut de lecture automatique indiquant si la lecture audio et vidéo commencera après le chargement.

黄舟

Libérer： 2017-11-08 09:35:48

original

3184 Les gens l'ont consulté

Instance

Activer la lecture et le rechargement automatiques Vidéo :

myVid=document.getElementById("video1");
myVid.autoplay=true;
myVid.load();

Copier après la connexion

Définition et utilisation

lecture automatique AttributsDéfinir ou indique si la lecture audio et vidéo commencera après le chargement.

Prise en charge du navigateur

Tous les principaux navigateurs prennent en charge l'attribut de lecture automatique.

Remarque : cet attribut n'est pas pris en charge dans Internet Explorer 8 ou les navigateurs antérieurs.

Syntaxe

Définir l'attribut de lecture automatique :

audio|video.autoplay=true|false

Copier après la connexion

Renvoyer l'attribut de lecture automatique :

audio|video.autoplay

Copier après la connexion

Valeur de l'attribut

值	描述
true	指示音视频在加载完成后随即播放。
false	默认。指示音视频不应在加载后立即播放。

Détails techniques

返回值	布尔值。true\|false
默认值：	false

Lorsque la vidéo html5 utilise l'attribut de lecture automatique, le son prête à confusion

Code de la page

Index.html

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>test</title> 
<meta charset=&#39;utf-8&#39;/>
<script src="js/jquery-1.4.4.min.js" type="text/javascript"></script>
<script src="js/thml5.js" type="text/javascript"></script>
<script type="text/javascript">

window.onload=function(){
$(&#39;#channel1&#39;).click(function(){
setConfig("test1.mp4");
});

$(&#39;#channel2&#39;).click(function(){
setConfig("test2.mp4");
});

$(&#39;#channel3&#39;).click(function(){
setConfig("test3.mp4");
});
}


function setConfig(url){
var jo=$(&#39;#test1&#39;);
var cfg=HTML5MediaService.getDefaultConfig();
 cfg=$.extend(cfg, {url: url});
HTML5MediaService.create(jo,cfg);
}

</script>
</head>
<body>
<div id=&#39;test1&#39; style="height:300px;width:500px;">

</div>
</br>
</br>
</br>
<div>
<span id=&#39;channel1&#39;>频道1</span>
<span id=&#39;channel2&#39;>频道2</span>
<span id=&#39;channel3&#39;>频道3</span>
</div>
</body>
</html>

Copier après la connexion

code js
html5.js

var HTML5MediaService= {
    getDefaultConfig: function () {
        return $.extend({}, {width: "100%", height: "100%", controls: "controls", autoplay: "autoplay"});
    },
    create:function(jo,cfg){
         this.videoId = "videojs_" + new Date().getTime().toString();
        var videoJo = $(&#39;<video&#39; +
            &#39; id="&#39; + this.videoId + &#39;"&#39; +
            &#39; src=&#39; + cfg.url +
            &#39; controls=&#39; + cfg.controls +
            &#39; autoplay=&#39; + cfg.autoplay +
            &#39; width=&#39; + cfg.width +
            &#39; height=&#39; + cfg.height +
            &#39; preload=none&#39; +
            &#39;></video>&#39;);
        videoJo.appendTo(jo.empty());
    }　　
   }

Copier après la connexion

Ma solution :

Supprimez la lecture automatique et utilisez la fonction play() pour obtenir la fonction de lecture automatique

;

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!

Php8, je viens aussi

Apprenez la mise en page d'un site Web en 30 minutes

Tutoriel vidéo Shangguan Oracle débutant à compétent

Votre première ligne de code UNI-APP

Flutter de zéro au lancement de l'application

Brother Lian Nouveau didacticiel vidéo Linux

Tutoriel vidéo AXURE 9 (convient à l'interface utilisateur interactive de conception de produits du chef de produit)

Tutoriel vidéo PS Zero Basic Proficiency

Tutoriel vidéo de 16 jours sur l'interface utilisateur pour vous aider à démarrer

Tutoriel vidéo sur les techniques PS et les techniques de découpage

Tutoriel vidéo sur la construction et le lancement de projets d'Alibaba Cloud Environment

Présentation des réseaux informatiques - Connaissances de base que les programmeurs doivent maîtriser

Tutoriel essentiel pour les programmeurs - Explication du protocole HTTP

Tutoriel vidéo Websocket

En HTML5, définissez ou renvoyez l'attribut de lecture automatique indiquant si la lecture audio et vidéo commencera après le chargement.