HTML 视频静音属性使用说明 - WebCat - 常规

<!DOCTYPE html>
<html>
  <head>
	<meta charset="utf-8" name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
	<title>WebCat</title>
 <style>
 *{
   padding:0;
   margin:0;
   }
 body{
background:#000;
}
 video{
   //aspect-ratio:9/20;
   transform:translateZ(0px) rotateZ(0deg);
   animation: fg 8000ms infinite ;
//linear;
   }
@keyframes fg {
   0%{
     transform: rotateY(0deg) rotateX(0deg);
}
<p>6.875%{
transform: rotateY(-180deg) rotateX(180deg);
}
31.875%{
transform: rotateY(-180deg) rotateX(180deg);
}
36%{
transform: rotateY(0deg) rotateX(0deg);
}</p>
<p>56.85%{
transform: rotateY(0deg) rotateX(0deg);
}
61%{
transform: rotateY(180deg) rotateX(-180deg);
}
81.875%{
transform: rotateY(180deg) rotateX(-180deg);
}
86%{
transform: rotateY(0deg) rotateX(0deg);
}
100%{
transform: rotateY(0deg) rotateX(0deg);
}
}
</style></p>
  </head>
  <body>	
<input type="file" id="inp" />
    <video src="" autoplay="" muted="true" width="100%" controls="" loop="" id="video"></video>
<script>
inp.onchange = function(){
        var file = inp.files[0];
        var reader = new FileReader();
        reader.onload = (e) =>{
          video.src = `${e.target.result}`;
          video.muted = "true";
        }
          reader.readAsDataURL(file);
      }
</script>
  </body>
</html>在HTML中，属性值应该用引号括起来。所以，你需要将muted属性的值更改为"true"，而不是true。请修改为以下代码：
<pre><code class="language-html">&lt;video src=&quot;&quot; autoplay=&quot;&quot; muted=&quot;true&quot; width=&quot;100%&quot; controls=&quot;&quot; loop=&quot;&quot; id=&quot;video&quot;&gt;&lt;/video&gt;
</code></pre>