Web Guide VI : Webpage Video Support

Jump to bottom

Dani John edited this page Sep 26, 2022 · 41 revisions

CefSharp browser plugin does not support x264 codec due to licensing; when trying to play it will be a blank white screen.

Edge Webview2 plugin supports x264 codec; due to CORS issue only online files for now.

Creating a webm video webpage for Cefsharp

Make sure installed version of Lively is v0.9.6 or above.
Video files need to be in .webm format with VP8 or higher codec, this is a licensing limitation.
Create a new text file, open in notepad and paste the following code:

<!DOCTYPE html>
<head>
  <style>
    body{
      margin: 0;
      overflow: hidden;
    }
    video{
      width: 100%;
      height: 100%;
    }
  </style>
</head>
<body>
  <video src="video_file_name.webm"  autoplay muted loop></video>
</body>
</html>

Save & change the file extension to html.
Place the video file in the same folder with the correct name: video_file_name.webm
(Optional) Use Livelypropertie's Folder Dropdown to change video clip during playback.

Converting existing videos to webm

To convert existing video files you can use third party software such as HandBreak
Open handbreak & in Source selection select the video file.
In Summary under Format select WebM.
In Video select VP8 or VP9 as Video Codec.
Click on Start Encode.