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

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

黄舟
黄舟original
2017-11-08 09:35:483304parcourir

Instance

Activer la lecture et le rechargement automatiques Vidéo :

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

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

Renvoyer l'attribut de lecture automatique :

audio|video.autoplay

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>

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());
    }  
   }

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!

Déclaration:
Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn