I see this to set the poster of a video
poster="placeholder.png"
Where do I have to add this with the WebMultimediaPlayer please.
Hi,
Currently there is no property that would enable this.
We'll add a Poster property that will be part of the next version. In the meantime, you can use the following code snippet:
procedure TForm1.WebFormCreate(Sender: TObject);
var
el: TJSHTMLElement;
begin
el := WebMultimediaPlayer1.ElementHandle;
asm
el.poster = 'placeholder.png';
end;
end;
That great thanks.
Also ( or should I start another post )
I have the WebMultimediaPlayers in a WebResponsiveGridPanel I set the width & height to 80% and need it to be centered in the grid panel. No combination of Align, AlignWithMargins Anchors etc allows me to do this.
You could try CSS:
.grid-aligned {
justify-items: center;
/*add align-items if vertical alignment is also needed:*/
/*align-items: center;*/
}
.grid-aligned div {
display: grid;
justify-items: center;
}
Then set TWebResponsiveGridPanel.ElementClassName to grid-aligned.
That's working fine.
One more on he cosmetics front.
.backGrad1{
background-image: -webkit-radial-gradient(10% 30%, white, black) !important ;
}
I have set webPageControl1 color to blue which show up okay.
When I change webPageControl1 ElementClassName to backGrad1 I loose the blue background but no color.
Hi,
I'm not sure I fully understand. Do you mean the ElementClassName of WebPageControlSheet?
Your code works here, although if you use the dropdown to select the ElementClassName, make sure that the name matches exactly. So it should be backGrad1 and not backgrad1.
I am creating WebMultimediaPlayers at runtime. I need to set the poster to be 10 secs in.
I see I can add #t=10 to the url but this also starts the video at 10 secs in.
The solution is:
<video preload="metadata" width="320" height="240" controls>
<source src="video.mp4#t=10" type="video/mp4">
</video>
How do I add the preload="metadata" at runtime please.
Hi,
The preload attribute is currently not exposed at TWebMultimediaPlayer level. We'll look to add support for this.
In the meantime, can you try the following and see if it works for you?
type
TForm3 = class(TWebForm)
WebButton1: TWebButton;
procedure WebButton1Click(Sender: TObject);
private
{ Private declarations }
public
{ Public declarations }
w: TWebMultimediaPlayer;
end;
var
Form3: TForm3;
implementation
{$R *.dfm}
procedure TForm3.WebButton1Click(Sender: TObject);
begin
w := TWebMultimediaPlayer.Create(Self);
w.Width := 400;
w.Height := 300;
w.Controls := True;
w.URL := 'http://commondatastorage.googleapis.com/gtv-videos-bucket/sample/BigBuckBunny.mp4#t=10';
w.Parent := Self;
(w.ElementHandle as TJSHTMLMediaElement).preload := 'metadata';
end;
TJSHTMLMediaElement is showing an error is this a typo ?
No it's not. We don't have it in our stub files but it is still available from the core Web unit. You should be able to compile and run the project.
If you are bothered by the underlined TJSHTMLMediaElement then you can use this instead:
w.ElementHandle.Properties['preload'] := 'metadata';
playerNameVideo.URL := 'https://www.toolfolks.com/docs/'+ filename + '#t=6';
playerNameVideo.ElementHandle.Properties['preload'] := 'metadata';
playerNameVideo.CurrentTime := 0;
The video poster shows okay but still starts at 6 seconds.
What am I missing please ?
After testing this your initial code snippet here, the following also starts the video at 10 seconds:
<video preload="metadata" width="320" height="240" controls>
<source src="video.mp4#t=10" type="video/mp4">
</video>
The WEB Core code does the equivalent.
Not sure why the playerNameVideo.CurrentTime := 0 does not execute for you properly, it changes the time correctly in our test case. But by setting the CurrentTime the thumbnail also changes.
I don't think there is a way around this other than somehow obtaining the required image/thumbnail from the video and setting the Poster property to that.
Is there a on click play event I can set to 0 ?
There is a play event at HTML level, but it will trigger in more instances.
Think about what happens when someone pauses the video then continues again. The play event linked above also triggers when someone tries to skip a few seconds. The video would constantly set to 0:00 whenever someone interacted with it.
Following this link
There seems to be 2 solutions. Is it possible to incorporate this code into my app ?
<video width="300" height="150" id='my-video'>
<source src="testvideo.mp4#t=2" type="video/mp4" />
</video>
$(function () {
let videoJs = videojs('my-video');
videoJs.one('play', function () {
this.currentTime(0);
});
});
<video width="100%" controls="controls" preload="metadata" id="myVid">
<source src="path/to/your/video#t=1.75" type="video/mp4">
</video>
<script>
var el = document.getElementById('myVid');
el.addEventListener('play', () => {
el.currentTime = 0;
}, { once: true });
</script>
videojs is a library. Unless you are planning on using a library for this, I'd say no.
The second one could be a possible solution, however we don't have an addEventListener override that supports options. You can solve this with an asm block for now:
var
el: TJSHTMLElement;
playerNameVideo: TWebMultimediaPlayer;
begin
{...}
playerNameVideo.URL := 'https://www.toolfolks.com/docs/'+ filename + '#t=6';
playerNameVideo.ElementHandle.Properties['preload'] := 'metadata';
el := playerNameVideo.ElementHandle;
asm
el.addEventListener('play', () => {
el.currentTime = 0;
}, { once: true });
end;
end;
I have uploaded here ( now have ssl installed).
Is the syntax correct as there is an error warning and the videos don't start at 0.
Cheers
It works but only on your last video. This is because in the play event always the el element is referenced. Try this instead:
asm
el.addEventListener('play', (event) => {
event.target.currentTime = 0;
}, { once: true });
end;
Got thatworking now. Thanks for all the help.