-
Our development site that uses videos hosted on AWS is almost done after several months of development, https://dev.vitaes.com/
We use the flowplayer to play videos on the front page https://dev.vitaes.com/, on the watch page https://dev.vitaes.com/watch and on individual profile pages, such as https://dev.vitaes.com/anchor-and-reporter-good-day-sacramento/
Radom clips, about a minute long, are played on the front page, and longer videos are played on profile pages and these can be viewed on mobile devices. But on the watch page, where visitors can click on a thumbnail image to play one of the videos, these same videos will not play, even though we can play them on the front page or on a profile page on mobile.
Note on the when viewing the watch page on the desktop, there is a menu of links to play different parts of the video, The first link, Highlights, plays the clip and all the other links will play different pars of the full video. On mobile devices, this menu is converted to a dropdown list where it says ‘Highlights’ with a triangle the points down. Click that to display the full list.
On the watch page, when one clicks on a link, the output of the flowplayer shortcode is inserted into the page and starts the video. This work well on desktop devices. But for mobile, the video starts to load but will not play. When there is a mobile version of a videos available, it will try and fail to play it. For the first four videos on the page I have tried using different low resolution and bitrate versions of the videos, mp4 or m3u8, but they still do not play. On some browsers such as Chrome, it puts out a message, HTML5 not supported, try installing Flash.
If I use a different HLS library, I can get the videos to play, but I have to do a lot of recoding for this to work.
It is a password protected site. Here are the log in credentials
(redacted)
Do you have a solution to this issue?
Note, be careful to not use the menu links as they may send you to the old site (https://vitaes.com/) which uses Vimeo videos.
-
-
Hello Apasho,
what code does is use to play these videos inserted via Ajax?
On the watch page, when one clicks on a link, the output of the flowplayer shortcode is inserted into the page and starts the video
Thanks,
Martin
This is the code for inserting the flow player code into the watch page:
function vt_get_video_html() {if ( !wp_verify_nonce( $_POST[‘nonce’], VITAES_NONCE)) {
exit(‘Missing nonce! Please refresh this page.’);
}if ((isset($_POST[‘video_id’])) && (strlen(trim($_POST[‘video_id’])) > 0))
$video_id = trim(stripslashes(strip_tags($_POST[‘video_id’])));
else
$video_id = ”;if ((isset($_POST[’embed_width’])) && (strlen(trim($_POST[’embed_width’])) > 0))
$embed_width = trim(stripslashes(strip_tags($_POST[’embed_width’])));
else
$embed_width = ”;if ((isset($_POST[’embed_height’])) && (strlen(trim($_POST[’embed_height’])) > 0))
$embed_height = trim(stripslashes(strip_tags($_POST[’embed_height’])));
else
$embed_height = ”;echo do_shortcode(‘[fvplayer id="'.$video_id.'" width="'.$embed_width.'px" height="'.$embed_height.'px" autoplay="true"] ‘);
die();
}
Hello Apasho,
I was wondering more about the JavaScript code – that’s where I would be looking for issues if the video doesn’t load properly.
If there is anything to initiate the video playback (autoplay) then please start by removing that part and see if it fixes the video playback.
Thanks,
Martin
You can view the javascript code here, https://dev.vitaes.com/wp-content/themes/vitaes-bridge-child/js/watch.js
The function, display_vitaes_iframe(), though we are not longer using video iframes, is the function that inserts the shortcode output.
Hello Apasho,
I see you use this to init FV Player:
jQuery.ajax({ ... success: function (data) { ... el = jQuery(data) window.fpId = el[0].id jQuery(".vimeography-embed").html(data); fv_player_load(); fv_autoplay_exec(); ... flowplayer(`#${window.fpId}`).load(); ... if(seek_to != 0) { setTimeout(function () { console.log('seeking to', seek_to); flowplayer(`#${window.fpId}`).seek(seek_to); }, 2000); } ... } });My recommendation would be to remove all that code starting with fv_player_load() down to that setTimeout() call. The FV Player should still load as we execute fv_player_load() after each Ajax call automatically.
If you want to autoplay the video inserted via Ajax, you can use this code: https://foliovision.com/support/fv-wordpress-flowplayer/bug-reports/autoplay-doesnt-work-with-ajax#post-148142
Thanks,
Martin
I tried running the script without
fv_player_load();
fv_autoplay_exec();
flowplayer(#${window.fpId}).load()
but it would no longer autoplay on desktop and still videos will not play on the watch page on mobile.
Any other ideas?
Hello Apasho,
it’s weird that it still won’t play on mobile.
You can try to run this on the mobile phone browser console and then reload the page:
localStorage.flowplayerDebug = true
That will let you debug the events which occur.
Thanks,
Martin
