Video Recommendations Demo
Video Recommendations
Show related videos after the playback is finished.
const player = flowplayer("#player", {
src: "56058953-2cbd-4858-a915-1253bf7ef7b2/69891ec1-2d90-423c-9892-5a9ee87b6d86",
poster: "https://flowplayer.com/resources/demos/images/work/black-skyscraper-big.jpg",
recommendations: false
})
// Trigger recommendations on player - you can also get this directly from the platform if you wish
player.on("loadstart", function () {
player.emit("recommendationsready", { "playlist": [
{
"poster": "//flowplayer.com/demos/images/work/black-skyscraper.jpg",
"src": [ "//cdn.flowplayer.com/ee6c914d-25d5-4703-935e-c8797b2275a8/hls/532915a5-28d8-43c0-a6d4-f142ad47b486/playlist.m3u8" ],
"title": "A black skyscraper"
},
{
"poster": "//flowplayer.com/demos/images/work/people-at-work.jpg",
"src": [ "//cdn.flowplayer.com/ee6c914d-25d5-4703-935e-c8797b2275a8/hls/fa1758b4-251c-4296-ad6c-a7366e3dfc41/playlist.m3u8"],
"title": "People not doing much at work"
},
{
"poster": "//flowplayer.com/demos/images/work/camera-shooting.jpg",
"src": [ "//cdn.flowplayer.com/ee6c914d-25d5-4703-935e-c8797b2275a8/hls/334510c0-8e0f-4b09-becd-a247d9df9691/playlist.m3u8"],
"title": "Taking a shoot with a camera"
},
{
"poster": "//flowplayer.com/demos/images/work/person-on-laptop.jpg",
"src": [ "//cdn.flowplayer.com/ee6c914d-25d5-4703-935e-c8797b2275a8/hls/63248edb-a884-4952-9eca-a64c0002cb18/playlist.m3u8"],
"title": "Someone typing on a laptop"
},
{
"poster": "//flowplayer.com/demos/images/agency/1-thumb.jpeg",
"src": [ "//cdn.flowplayer.com/ee6c914d-25d5-4703-935e-c8797b2275a8/hls/63248edb-a884-4952-9eca-a64c0002cb18/playlist.m3u8"],
"title": "Random UI sketching on paper"
},
{
"poster": "//flowplayer.com/demos/images/agency/2-thumb.jpeg",
"src": [ "//cdn.flowplayer.com/ee6c914d-25d5-4703-935e-c8797b2275a8/hls/fa1758b4-251c-4296-ad6c-a7366e3dfc41/playlist.m3u8"],
"title": "Our office space without lights on"
},
{
"poster": "//flowplayer.com/demos/images/agency/3-thumb.jpeg",
"src": [ "//cdn.flowplayer.com/ee6c914d-25d5-4703-935e-c8797b2275a8/hls/334510c0-8e0f-4b09-becd-a247d9df9691/playlist.m3u8"],
"title": "A normal, boring day at work typing stuff"
},
{
"poster": "//flowplayer.com/demos/images/agency/5-thumb.jpeg",
"src": ["//cdn.flowplayer.com/ee6c914d-25d5-4703-935e-c8797b2275a8/hls/532915a5-28d8-43c0-a6d4-f142ad47b486/playlist.m3u8"],
"title": "Hey, we have a pile of useless startup swag!"
},
{
"poster": "//flowplayer.com/demos/images/fashion/1.jpeg",
"src": [ "//cdn.flowplayer.com/ee6c914d-25d5-4703-935e-c8797b2275a8/hls/334510c0-8e0f-4b09-becd-a247d9df9691/playlist.m3u8"],
"title": "T-shirts hanging in black/white tone"
},
{
"poster": "//flowplayer.com/demos/images/fashion/3.jpeg",
"src": ["//cdn.flowplayer.com/ee6c914d-25d5-4703-935e-c8797b2275a8/hls/532915a5-28d8-43c0-a6d4-f142ad47b486/playlist.m3u8"],
"title": "Making our selection tempting for people"
},
{
"poster": "//flowplayer.com/demos/images/fashion/4.jpeg",
"src": [ "//cdn.flowplayer.com/ee6c914d-25d5-4703-935e-c8797b2275a8/hls/334510c0-8e0f-4b09-becd-a247d9df9691/playlist.m3u8"],
"title": "We try that too with a nicer camera angle"
},
{
"poster": "//flowplayer.com/demos/images/fashion/6.jpeg",
"src": ["//cdn.flowplayer.com/ee6c914d-25d5-4703-935e-c8797b2275a8/hls/532915a5-28d8-43c0-a6d4-f142ad47b486/playlist.m3u8"],
"title": "We think less is more and simplicity wins"
},
]})
})
Wowza Flowplayer Demos
The most popular setups on the Internet.
Standard layout
The most common video-setup in the Internet.
Video recommendations
Show related videos after the playback is finished.
Video thumbnails
Render thumbnails for individual scenes for easy scanning of the video.
Background video
Play video behind the other elements.
Audio-only setup
Use Flowplayer for podcasts and music.
Video gallery
Four videos in a grid.
Video perspective
That subtle decoration for your video.
Floating video
Press play and scroll to see the player floating on the bottom/left corner of the browser window.
Custom call-to-action button
Nudge visitors towards the action
Adaptive bitrate streaming (ABR)
The dynamic switching of the video quality