Right, so I got it working.
[{"id":"f29ba9d80a04a8a5","type":"uibuilder","z":"c51f51da7ee02d68","name":"","topic":"","url":"streaming-video-test","fwdInMessages":false,"allowScripts":false,"allowStyles":false,"copyIndex":true,"templateFolder":"blank","extTemplate":"","showfolder":false,"reload":true,"sourceFolder":"src","deployedVersion":"6.1.0-beta","showMsgUib":false,"x":700,"y":2180,"wires":[["6ba9b3108645ae90"],["3cddafd5b4417b8a","f13e273c7d57514a"]]},{"id":"116114e2e4efff5b","type":"inject","z":"c51f51da7ee02d68","name":"","props":[{"p":"topic","vt":"str"}],"repeat":"","crontab":"","once":false,"onceDelay":0.1,"topic":"play","x":390,"y":2180,"wires":[["f29ba9d80a04a8a5"]]},{"id":"6ba9b3108645ae90","type":"debug","z":"c51f51da7ee02d68","name":"debug 101","active":true,"tosidebar":true,"console":false,"tostatus":true,"complete":"true","targetType":"full","statusVal":"","statusType":"counter","x":875,"y":2140,"wires":[],"l":false},{"id":"3cddafd5b4417b8a","type":"debug","z":"c51f51da7ee02d68","name":"debug 102","active":false,"tosidebar":true,"console":false,"tostatus":true,"complete":"true","targetType":"full","statusVal":"","statusType":"counter","x":875,"y":2200,"wires":[],"l":false},{"id":"aec8461659368b17","type":"inject","z":"c51f51da7ee02d68","name":"","props":[{"p":"topic","vt":"str"}],"repeat":"","crontab":"","once":false,"onceDelay":0.1,"topic":"pause","x":390,"y":2220,"wires":[["f29ba9d80a04a8a5"]]},{"id":"f13e273c7d57514a","type":"switch","z":"c51f51da7ee02d68","name":"","property":"uibuilderCtrl","propertyType":"msg","rules":[{"t":"eq","v":"client connect","vt":"str"},{"t":"else"}],"checkall":"false","repair":false,"outputs":2,"x":910,"y":2260,"wires":[["84147b5c165db7db"],[]]},{"id":"84147b5c165db7db","type":"change","z":"c51f51da7ee02d68","name":"","rules":[{"t":"set","p":"topic","pt":"msg","to":"play","tot":"str"},{"t":"delete","p":"uibuilderCtrl","pt":"msg"}],"action":"","property":"","from":"","to":"","reg":false,"x":1060,"y":2240,"wires":[["ef09cbfcfdab3a16"]]},{"id":"0963e15e41ebacda","type":"link in","z":"c51f51da7ee02d68","name":"link in 8","links":["ef09cbfcfdab3a16"],"x":385,"y":2140,"wires":[["f29ba9d80a04a8a5"]]},{"id":"ef09cbfcfdab3a16","type":"link out","z":"c51f51da7ee02d68","name":"link out 28","mode":"link","links":["0963e15e41ebacda"],"x":1185,"y":2240,"wires":[]}]
index.html
<!doctype html>
<html lang="en"><head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Blank template - Node-RED uibuilder</title>
<meta name="description" content="Node-RED uibuilder - Blank template">
<link rel="icon" href="../uibuilder/images/node-blue.ico">
<!-- Your own CSS (defaults to loading uibuilders css)-->
<link type="text/css" rel="stylesheet" href="./index.css" media="all">
<link href="https://unpkg.com/video.js@latest/dist/video-js.css" rel="stylesheet">
<!-- #region Supporting Scripts. These MUST be in the right order. Note no leading / -->
<script defer src="https://unpkg.com/video.js@latest/dist/video.js"></script>
<script defer src="../uibuilder/uibuilder.iife.min.js"></script>
<script defer src="./index.js">/* OPTIONAL: Put your custom code in that */</script>
<!-- #endregion -->
</head><body class="uib">
<h1>Video.js Example Embed</h1>
<video-js id="my_video_1" class="vjs-default-skin"
controls preload="auto" width="640" height="268" muted="muted">
<source src="https://d2zihajmogu5jn.cloudfront.net/bipbop-advanced/bipbop_16x9_variant.m3u8"
type="application/x-mpegURL">
</video-js>
<div id="more"><!-- '#more' is used as a parent for dynamic HTML content in examples --></div>
</body></html>
index.js
// @ts-nocheck
/** The simplest use of uibuilder client library
* Note that uibuilder.start() should no longer be needed.
* See the docs if the client doesn't start on its own.
*/
'use strict'
// logLevel 2+ shows more built-in logging. 0=error,1=warn,2=info,3=log,4=debug,5=trace.
// uibuilder.set('logLevel', 2)
// uibuilder.log('info', 'a prefix', 'some info', {any:'data',life:42})
var player = videojs('my_video_1')
// myPlayer.ready(function () {
// player.play()
// })
// Listen for incoming messages from Node-RED
uibuilder.onChange('msg', function(msg) {
if (msg.topic === 'pause') {
player.pause()
}
if (msg.topic === 'play') {
player.play()
}
})
However, at least in Chrome, you CANNOT auto-start a video unless one of two things is true. Either the user must have already interacted with the web page. Or you have to set the video player to muted="muted" which is what I've done here. So the video starts but you get no sound.
As expected, no delay is needed after the connected message is output.
no problem. I'm always using these interactions to think about how to better document and explain how to use uibuilder.
