BinaryDevelop
  1. ホーム
  2. Web制作
  3. html5

ビデオカバーを設定するH5ビデオポスタープロパティ

2022-01-12 14:12:24

動画を開き、再生をクリックする前にカバー画像が表示されます。クリックするとカバーが消え、動画が再生されます。

動画の表紙をカスタマイズしたいという要望がある場合、どのようにすればよいでしょうか。

これは、H5ビデオで提供されるposterプロパティを使用して簡単に行うことができます。

poster 属性は、動画がダウンロードされるとき、またはユーザーが再生ボタンをクリックする前に表示される画像を指定します。この属性が設定されていない場合、ビデオの最初のフレームが代わりに使用されます。

デモ 

<!DOCTYPE HTML>
<html>

    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
        <title>Video cover</title>

    </head>

    <body>
        <video width="400" height="400" poster="https://timgsa.baidu.com/timg?image&quality=80&size=b9999 _10000&sec=1574066857005&di=
27dc7334bc80c4336d3443e8ecde3160&imgtype=0&src=http%3A%2F%2Fbpic.588ku.com%2Felement_origin_min_pic%2F17%2F02%2F06% 2Fed0c0ddc6271b0717ca64ffdf847eab6.jpg" controls>
            <source src="https://www.w3school.com.cn/i/movie.mp4" type="video/mp4">
            <source src="https://www.w3school.com.cn/i/movie.mp4" type="video/ogg">
        </video>
    </body>

</html>

補足：ビデオカバーが広げられないことがあるので、object-fitプロパティを使って画面全体を広げる必要があります

これは、H5ビデオポスタープロパティを使用してビデオカバーを設定する方法についてのこの記事の終わりです、より関連するH5セットビデオカバーの内容は、スクリプトハウスの過去の記事を検索してくださいまたは次の関連記事を閲覧を継続、あなたは将来的にもっとスクリプトハウスをサポートしています願っています

関連

最新

おすすめ

について
/
プライバシー・ポリシー
/
お問い合わせ
© 2022 BinaryDevelop. すべての権利は、それぞれの所有者に帰属します