html5 自動再生 mov形式動画サンプルコード
2022-01-14 09:07:49
これって目新しさはないですよね？でも、とにかく記録しておきましょう。
質問はこう見るべき
1. まず、このサイトは.MOV形式のファイルをサポートする必要があります。
つまり、このサイトは.MOV形式のファイルを認識できる必要があります。
<mimeMap fileExtension=".mov" mimeType="video/quicktime" />
認識させるには？MIMEタイプを設定します。IISを例にとります。IISのインターフェイスで直接設定するほか、プロジェクトのweb.configで設定することも可能です。完全な例を挙げると
<?xml version="1.0" encoding="UTF-8"? >
<configuration>
<system.webServer>
<directoryBrowse enabled="true" />
<defaultDocument>
<files>
<remove value="default.aspx" />
<remove value="iisstart.htm" />
<remove value="index.html" />
<remove value="index.htm" />
<remove value="Default.asp" />
<remove value="Default.htm" />
</files>
</defaultDocument>
<staticContent>
<remove fileExtension=".mp4" />
<remove fileExtension=".wasm" />
<remove fileExtension=".woff" />
<remove fileExtension=".woff2" />
<remove fileExtension=".mov" />
<mimeMap fileExtension=".mp4" mimeType="video/mpeg" />
<mimeMap fileExtension=".wasm" mimeType="application/wasm" />
<mimeMap fileExtension=".woff" mimeType="application/font-woff" />
<mimeMap fileExtension=".woff2" mimeType="application/font-woff2" />
<mimeMap fileExtension=".mov" mimeType="video/quicktime" />
</staticContent>
<httpProtocol>
<customHeaders>
<add name="Access-Control-Allow-Origin" value="*" />
</customHeaders>
</httpProtocol>
<caching>
<profiles>
<add extension=".png" policy="CacheUntilChange" kernelCachePolicy="CacheUntilChange" />
<add extension=".jpg" policy="CacheUntilChange" kernelCachePolicy="CacheUntilChange" />
<add extension=".css" policy="CacheUntilChange" kernelCachePolicy="CacheUntilChange" />
<add extension=".js" policy="CacheUntilChange" kernelCachePolicy="CacheUntilChange" />
</profiles>
</caching>
</system.webServer>
</configuration>
2. HTML
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<style>
body,center{
padding:0;
margin:0;
}
</style>
</head>
<body>
<center>
<video id="video" width="640" height="480" muted controls autoplay="autoplay" preload=" auto" >
<source src="Half Moon Bay.mov" />
Your browser does not support the HTML5 video tag.
</video>
</center>
</body>
</html>
この例では、自動的に再生されます。自動再生のキーは "muted" プロパティで、そうでなければ autoplay="autoplay" と宣言しても、スクリプト video.play() を使用しても機能しません。これは、意図的にそうするように設計されているはずです。そうでなければ、開いて自動再生、それがラブアクション映画だったらどうする？ミュートされていれば心配はないのですが。
概要
上記はhtml5自動再生mov形式ビデオのサンプルコードです、それはあなたに役立つことを願って、あなたが何か質問がある場合は、私にメッセージを残してください、私は時間にあなたに返信されます。今後ともスクリプトハウスをよろしくお願いいたします。
この記事が役に立つと思われる方は、出典を明記の上、ご自由に再掲載してください。
関連
最新
-
nginxです。[emerg] 0.0.0.0:80 への bind() に失敗しました (98: アドレスは既に使用中です)
-
htmlページでギリシャ文字を使うには
-
ピュアhtml+cssでの要素読み込み効果
-
純粋なhtml + cssで五輪を実現するサンプルコード
-
ナビゲーションバー・ドロップダウンメニューのHTML+CSSサンプルコード
-
タイピング効果を実現するピュアhtml+css
-
htmlの選択ボックスのプレースホルダー作成に関する質問
-
html css3 伸縮しない 画像表示効果
-
トップナビゲーションバーメニュー作成用HTML+CSS
-
html+css 実装 サイバーパンク風ボタン