HTML5動画のミュートされた属性がプロパティを使用して適用されていませんが、setAttributeを使用して適用されました

HTML5動画を使用しているときに不思議な不一致が見つかりました。最初videoについてHTML5動画のミュートされた属性がプロパティを使用して適用されていませんが、setAttributeを使用して適用されました

Compare these two code snippets and take a look at the Elements tab in Chrome developer tools

<body> 
    <script> 
    const video1 = document.createElement('video'); 
    video1.autoplay = true; 
    video1.muted = true; 
    document.body.appendChild(video1); 

    const video2 = document.createElement('video'); 
    video2.setAttribute('autoplay', 'autoplay'); 
    video2.setAttribute('muted', 'muted'); 
    document.body.appendChild(video2); 
    </script> 
</body>

、JSオブジェクトプロパティを使用してmutedセットが設定されませんでした。 2番目の場合、setAttributeを使用してDOM属性が設定されています。面白いことに、これは一貫して動作するautoplayの場合ではありません。

なぜですか？このように振る舞う属性の別の例がありますか？これにルールがありますか？どの属性のプロパティがテスト以外のJSでどのように動作するかは、どのようにして伝えられますか？

出典

2017-01-14 Tomáš Hübelbauer

属性は、プロパティの初期化にのみ使用されます。現在の状態は反映されません。

プロパティを直接設定すると、オブジェクトが更新されますが、dom属性には影響しません。

あなたは（あなたが実際にアクションでそれを見ることができます）videoのsrcを設定する場合は、プロパティが正しく

const video1 = document.createElement('video'); 
 

 
video1.src = 'http://clips.vorwaerts-gmbh.de/big_buck_bunny.mp4'; 
 
video1.controls = true; 
 
video1.autoplay = true; 
 
video1.muted = true; 
 

 
document.body.appendChild(video1);

を適用されていることがわかります

出典

2017-01-15 00:11:15

HTML5動画のミュートされた属性がプロパティを使用して適用されていませんが、setAttributeを使用して適用されました

答えて

関連する問題