Add video to the site from WP
It is necessary to integrate a video (55 seconds) on the main page of the website in the required place:
- The presence of the video should not hinder the loading of the website and critically affect the speed (https://pagespeed.web.dev/).
- It is necessary to choose an optimal, modern format and method of output so that nothing lags during buffering, but the quality should be good, considering that the video will be full-width on the PC screen.
- On PC, the video starts playing when it is scrolled to. Without sound, but with pause/play buttons and a sound on/off button in the corner. When clicking on the video itself with the mouse, it either stops or continues playing.
- On mobile phones, the video does not play automatically, but there is a semi-transparent button in the middle. There are also sound and pause/play buttons at the top. When tapping the screen, the video stops or continues playing.
- Instead of the first, frozen video frame on the phone, when the video has not yet started playing, there should be a placeholder image.
- The main page of the website in the WP admin has its classic settings page (changing/adding photos, etc.) – it is necessary to add the ability to change the video and the placeholder image for mobile. The video files for mobile and PC are different. Or if it is some kind of plugin – it should be somewhat flexible in settings.
To adapt the video for different qualities of internet connections, browsers, devices, use technologies: HLS (fMP4) + CDN (HTTP/2 or HTTP/3, 2–4 seconds) + ladder with H.264 + player — native HLS for Safari and hls.js for others.
- The presence of the video should not hinder the loading of the website and critically affect the speed (https://pagespeed.web.dev/).
- It is necessary to choose an optimal, modern format and method of output so that nothing lags during buffering, but the quality should be good, considering that the video will be full-width on the PC screen.
- On PC, the video starts playing when it is scrolled to. Without sound, but with pause/play buttons and a sound on/off button in the corner. When clicking on the video itself with the mouse, it either stops or continues playing.
- On mobile phones, the video does not play automatically, but there is a semi-transparent button in the middle. There are also sound and pause/play buttons at the top. When tapping the screen, the video stops or continues playing.
- Instead of the first, frozen video frame on the phone, when the video has not yet started playing, there should be a placeholder image.
- The main page of the website in the WP admin has its classic settings page (changing/adding photos, etc.) – it is necessary to add the ability to change the video and the placeholder image for mobile. The video files for mobile and PC are different. Or if it is some kind of plugin – it should be somewhat flexible in settings.
To adapt the video for different qualities of internet connections, browsers, devices, use technologies: HLS (fMP4) + CDN (HTTP/2 or HTTP/3, 2–4 seconds) + ladder with H.264 + player — native HLS for Safari and hls.js for others.