Using Webview as a video player

Mike

The following code shows a player but will not load the local video:

local html = [[<!doctype html>
<html>
    <head>
		<title>Test Video Player</title>
    </head>
    <body>
		<video width = 400 controls>
			<source src="example.mp4" type="video/mp4">
		</video>
    </body>
 </html>

local win = ui.Window("Test Video Player", 640, 540)
local wv = ui.Webview(win, "'")

wv.align = "all"

function wv:onReady()
    wv:loadstring(html)
end

win:center()

ui.run(win):wait()

I am also assuming JavaScript run via Webview.eval also cannot access the local file system. Is there any work around that won't require me to install node.js or something else equally elaborate? Microsoft's WebView2 documentation basically suggests a WebView is a lightweight browser with the usual security restrictions such as no local file access.

If there isn't a good, simple work around, I'll just stick to my Python player until and unless LuaRT has a video module that can play local files.

Samir

Have you tried to prepend the filename with "file:///" ?

If it does not work you should try using Webview:hostfromfolder()

Mike

I tried both the file:/// prefix and hostfromfolder --neither will load the video.

Samir

Ok I will see what can be done

Mike

I found a solution to load and play videos in a Webview. I use a caddy server to host a fileserver on localhost with my video folder as root. Then I set the URL to "http://localhost/Cher.dir/Believe.mp4" or whatever video I want. It loads quite fast, but thus far I haven't figured out how to control the playing video from LuaRT. The playing video has controls displayed that work, however. I will of course replicate the functionality of my Python player's other facilities for selecting the video(s) to be played, adding new videos to the collection, etc. All of this is done by using the file system.

Samir

I have moved the previous discussion from the module suggestion post to a specific one

I got it working. The problem comes with Webview2 security policies that don't allow the use of local resources when using Webview:loadstring(), because the origin of the Webview content is set to about:blank

See https://learn.microsoft.com/en-us/microsoft-edge/webview2/concepts/working-with-local-content?tabs=dotnetcsharp#loading-local-content-by-navigating-to-an-html-string for more on this

To make it works, you should put the html content in a separate file and load it directly from the Webview constructor call :

example.html

<!doctype html>
<html>
    <head>
		<title>Test Video Player</title>
    </head> 
    <body>
		<video controls style="top:0; left: 0; position: absolute; height: calc(100vh); width: 100%; object-fit: cover">
			<source src="example.mp4" type="video/mp4">
		</video>
    </body>
 </html>

video.lua

local ui = require "ui"
require "webview"

local win = ui.Window("Test Video Player", 640, 540)
local wv = ui.Webview(win, "file:///"..sys.File("example.html").fullpath)
wv.align = "all"

win:center()
ui.run(win):wait()

Both files should be in the the current directory

Samir

It works too when using Webview:hostfromfolder(), just replace the Lua script with this one :

local ui = require "ui"
require "webview"

local win = ui.Window("Test Video Player", 640, 540)
local wv = ui.Webview(win, "")

wv.align = "all"

function wv:onReady()
    -- host from a dummy 'myvideos.org' that will be mapped to the current directory
    wv:hostfromfolder("myvideos.org", sys.currentdir)
    wv.url = "https://myvideos.org/example.html"
end

win:center()

ui.run(win):wait()

Samir

For now, it's not possible to use Webview:loadstring() to load local resource from a hosted folder.
I have found a fix for next LuaRT release.

esferatec

I created a small video application to open any mp4 file and play the video in a webview. You can load, play and pause the video from within LuaRT.

ec-luart-video

Samir

Great example, thank you Esferatec 🙏🏻

Mike

esferatec This looks like a good solution, I will copy the raw files from Github tonight and try this out. I may try that with your layout manager as well, but I wish the Github page allowed downloading a zip file.

Mike

It works! but for some reason, it won't play a particular .mp4 at all (Alabama's If You're Gonna Play in Texas--which just happened to be the first I tested). So far, all others work correctly except that one. My Python/vlc player works on that video. The LuaRT program doesn't take nearly as long to load the first video as my program does. I will download the files for Esferatec's layout manager later, and brush up on my JavaScript for additional controls (volume, mute, etc.)

esferatec

Mike Hello Mike, you can download the source code direclty from the repository view - see Downloading source code archives from the repository view

Mike

esferatec Thanks for the reminder--I hadn't used GitHub for a while and had forgotten. I downloaded your layout manager and several other projects: several look useful for my program,