the video did not display the thumbnail of the first frame

gamefans

After I published the video, when I accessed it with a mobile phone, the video did not display the thumbnail of the first frame. Now I have to use a picture as the cover, but it is normal to access it with a computer. Please help me to solve this problem.

http://g.cyberbev.com/d/26-16

Program version:1.0.2
Extensions: FoF Upload 1.0.1 or FoF Formatting1.0.0

clarkwinkelmann

gamefans from your description I suspect because the <video> tag has no cover attribute, every browser will have its own way to choose a thumbnail. Some might choose the first frame, others might use a different logic?

Is there a specific browser app or version that's acting different from all others? Did you test multiple desktop and multiple mobile browsers?

I'm not sure we will be able to help at the Flarum level since neither FoF Upload nor FoF Formatting (MediaEmbed AutoVideo behind the scenes I suppose) have code to generate a video thumbnail.

gamefans

clarkwinkelmann

Everything is normal on the PC browser, because it will automatically load the video, so there are screens appearing. I have tested the browsers of Apple, Google, and Android with a mobile phone, but the screen is black, because it does not automatically load the video, so I use it now A picture instead.

my css code:

@media (min-width: 768px) and (max-width: 979px) { 
video {
 width: 428px;
 height: 241px;
background: url('https://pic.chinaz.com/picmap/thumb/201906242208064335_2.jpg') no-repeat center 0;
}}

@media (min-width: 415px) and (max-width: 767px) {
video {
 width: 430px;
 height: 245px;
background: url('https://pic.chinaz.com/picmap/thumb/201906242208064335_2.jpg') no-repeat center 0;
}
}

@media (min-width: 980px){
video {
 width: 640px;
 height: 360px;
background: #000;
}
}

@media (max-width: 414px) {
video {
 width: 384px;
 height: 216px;
background: url('https://pic.chinaz.com/picmap/thumb/201906242208064335_2.jpg') no-repeat center 0;
}
}

@media (max-width: 375px) {
video {
 width: 345px;
 height: 194px;
background: url('https://pic.chinaz.com/picmap/thumb/201906242208064335_2.jpg') no-repeat center 0;
}
}

gamefans

clarkwinkelmann

That is, the video will automatically load when the PC is accessed with a browser, so there is a cover, not the thumbnail or the first frame, but the video is not automatically loaded when the phone is accessed with a browser, so the cover is black, which affects the user experience and no access See the content of the video intuitively. So is there any way to make the video automatically load when the mobile browser visits it?