はじめに
videoタグを使用したhtmlファイルをLively wallpaperに設定してデスクトップの背景に動画を連続再生したかったのですが、思わぬところで躓いたのでメモします。
やりたいこと
htmlファイルを用意し、Lively wallpaperに読み込ませます。
他にsrcに動的に動画ファイルを設定したり動画を全画面にしたりするスタイルシートを用意したりもしますが、やりたいことはこんな感じです。
index.html
<!DOCTYPE html>
<html lang="ja">
<head>
</head>
<body>
<div class="wrapper">
<video id="video" autoplay muted src="./movie.mp4">
</video>
</div>
</body>
</html>
設定してみる
設定しますが、プレビューも真っ黒になってしまうようにこのまま壁紙として有効化しても動画が再生されません。
ただし、htmlファイルを直接開いてブラウザで確認すると再生されることが確認できます。
解決方法
Lively WallpaperのWebブラウザはデフォルトではCefSharpが選択されます。
しかし、CefSharpではオープンなファイルコーデックのみをサポートしており、H264/AACなどのコーデックはサポートされていないためmp4形式のファイルは再生できないことがあります。
そのため、今回の場合WebブラウザーにWebView2を選択する必要があります。
Webview2プラグインのインストール
このまま有効にするとWebview2プラグインがないことでエラーが発生するためプラグインをインストールする必要があります。
以下を参考にインストールします
インストール後、Lively wallpaperを再起動しWebブラウザーをWebView2に設定します。
そして解決
htmlファイルを追加するとプレビュー上でも動画が再生されています。
背景上でも動画が再生されます。
補足
- Lively wallpaperはMicrosoft Store経由でもインストールできますが、この場合WebView2プラグインを適用できるかは不明です。インストーラー版でインストールしたほうが良いかもしれません…
参考