WebBrowser htmlPlayer Volume control with TrackBar ?


Aug 10, 2022
Programming Experience
... this is the code for the Player
   Public Sub htmlPlayer()
        Dim html As String = "<html><head>"
        html += "<meta content='IE=Edge' http-equiv='X-UA-Compatible'/>"
        html += "<div style = 'position:absolute; left: 0;right: 0;top: 0;bottom: 0;background: black;'>"
        html += "<link href='https://unpkg.com/video.js/dist/video-js.css' rel='stylesheet'>"
        html += "<script src='https://unpkg.com/video.js/dist/video.js'></script>"
        html += "<script src='https://unpkg.com/videojs-contrib-hls/dist/videojs-contrib-hls.js'></script>"
        html += "<video id='my_video' class='video-js vjs-fluid vjs-default-skin' data-setup='{}' autoplay>"
        html += "<source src='" & ComboBox4.Text & "' type='application/x-mpegURL'>"
        WebBrowser1.DocumentText = html
    End Sub

This is how I turned off the Player controls (I need a double click for full screen) but I lost the volume control
CType(WebBrowser1, System.Windows.Forms.Control).Enabled = False

Is there any way to somehow control the volume with the TrackBar ?
  Private Sub TrackBar3_Scroll(sender As Object, e As EventArgs) Handles TrackBar3.Scroll
        'Dim htmlVolume = WebBrowser1.Document.GetElementById("my_video")
        'htmlVolume.volume = TrackBar3.Value / 100
    End Sub
I have no idea how that media player works so I can't really address your issue, but I will offer some criticism that should help you improve your code and application here and elsewhere.

Firstly, you really ought to use the concatenation operator (&) for concatenation rather than the addition operator (+). They will do the same thing in many scenarios but not all. If you always use the concatenation operator then it will always perform concatenation.

Secondly, unless you're using a fairly old version of VB, multiline String literals are supported. Even in those old versions, XML literals are supported, so you don't need to do all that concatenation. In fact, the result will be better using either of those options because the final HTML will be over multiple lines and thus easier to read.

Also, there's no need to down-cast your WebBrowser control as type Control in order to access the Enabled property. That would be like down-casting a Label or TextBox to access the Text property.

Finally, you really ought to be using a WebView2 control these days, which is Edge-based, rather than a WebBrowser control, which is IE-based.
1. Thanks for the comprehensive and useful advice.

2. My programming knowledge is limited to finding code on the internet and modifying it for my needs (I'm too old to learn :))

3. In order for you to understand why I'm doing everything wrong, I'll try to explain ...

I need "TopMost" clock and i made it ... but ... I added alarm ... radio ... tv ... and now it turned out 4in1.
The problem is because I want the application to have only one file (I use SaveSetting for save data).
Maybe it looks stupid, but when I start like that, I'll finish it like that.

The only tv solution I found is this one above (to avoid AxWindowsMediaPlayer, AxVLCPlugin21, PVS.MediaPlayer, mpv-1.dll ...)

Now it's double-clicking for fullscreen that's stopping me.

I can choose:
a) disable player control = double click
b) show player control (have volume slider) = no double click

... I want double clik so I need to find a solution for volume control

Is there any chance to control the volume with TrackBar ?


  • DeskTopclock.zip
    136.3 KB · Views: 8
I haven't found a solution yet, so I'll try to ask the question one more time...

This is the WebBrowser player - TV channel source is ComboBox1.Text
    Public Sub htmlPlayer()
        Dim html As String = "<meta content='IE=Edge' http-equiv='X-UA-Compatible'/>
        <div style = 'position:absolute; left: 0;right: 0;top: 0;bottom: 0;background: black;'>
        <link href='https://unpkg.com/video.js/dist/video-js.css' rel='stylesheet'>
        <script src='https://unpkg.com/video.js/dist/video.js'></script>
        <script src='https://unpkg.com/videojs-contrib-hls/dist/videojs-contrib-hls.js'></script>
        <video id='my_video' class='video-js vjs-fluid vjs-default-skin' controls preload='auto' data-setup='{}' autoplay>
        <source src='" & ComboBox1.Text & "' type='application/x-mpegURL'>"
        WebBrowser1.DocumentText = html
    End Sub

This is the PLAY button
    Private Sub Button1_Click(sender As Object, e As EventArgs) Handles Button1.Click
    End Sub

This is the STOP button
    Private Sub Button2_Click(sender As Object, e As EventArgs) Handles Button2.Click
    End Sub

Is there any chance to use the TrackBar to control the volume ?

Regardless of browser it is possible the browser can not control the audio of the embedded mediaplayer. In my opinion it would be preferable to control the audio of the application instead of the global system volume. When researching this it is not easy to find something that "works" without to much hassle, one option I found is a Nuget package called Audioswitcher, where I was able to use the trackbar to control the application audio, and also opposite to control the trackbar by changing application audio volume in Windows mixer. Attached is a basic test project that embed video in a webbrowser like you do and set up the audio control. When opening the project first rebuild it for the Nuget package to be installed.


  • AudioTest.zip
    12.1 KB · Views: 6
Thank you for your interest in helping.

That's what I need but there is one problem - the application should have only one EXE file, and with this solution two dll files appear with AudioSwitcher (AudioSwitcher.AudioApi.CoreAudio.dll and AudioSwitcher.AudioApi.dll)

The solution is excellent, but it doesn't get the job done for me.

Thank you once again.

Maybe it's stupid that I work in this way, but I would really like to finish the application the way I planned.