-
Hello we are developing a mobile app and would like to know if your plugin’s features are available through the WordPress REST API? If so, how can the features of the player be requested and accessed? Thanks for your time,
Nate
-
-
Hello Nate,
the player is typically inserted into the post content, so I guess the HTML markup for it should show up in your app just fine.
However I’m not about the JavaScript part of it. It seems to me that part has to be handled in your app.
Is your app able to render web content in the iframe tag? In that case the FV Player iframe embed codes could be used for video in the REST response for the app.
Thanks,
Martin
Hello Martin,
After attempting to load the video using iframe it proved to be unsuccessful. Is there a way to load the Java in the app?
Hi Nathan,
Were you using our iframe embedding button to generate the code or did you use the video URL?
Thanks,
Eduard
Hello,
I used the default video url and the embed code.
The default was used on the one where the video did display, the player just doesn’t look normal.
The test page is where I added the embed code.
The page that says Video: Jesus Light of the World is where the player just added words over the image.
I added snapshots so you can see from the backend of the mobile app creator.
The problem is we use fv player to override the default wordpress player and a podcast plugin to use custom meta to add the video to our podcast playlist type I added an image of that as well.
Hi Nathan,
Could you please confirm that you have used the iframe embed code and not the old embed script? (examples are in this guide)
Thanks,
Eduard
Apologies, yes I tried both and neither worked.
Hello Nate,
1) this is tricky to figure out, could you please check how is the mobile app rendering the content it reads from the REST API? I’m guessing it only reads the post content, so any scripts which initialize the player won’t take effect as they are in footer. Can you get some specs from that from your developers of from documentation of the framework which you are using?
2) Will the app not render iframe such as this one properly?
3) Can you include a link to the REST API for us to see what is actually there?
Thanks,
Martin
Hello again, you guessed it the only thing loaded is the content. Footer, Sidebar, Header all gone. We are using this: https://apppresser.com/
The docs are under resources.
and here is our API: https://christianjournal.net/wp-json/wp/v2/posts
Plus here is the other API we are using for podcasts: https://christianjournal.net/wp-json/wp/v2/podcast
Also they use this: http://v2.wp-api.org/
I can confirm that the test page will not load the embed code you provided
Hello Nate,
here if says that iframe should work: http://docs.apppresser.com/article/288-custom-html-pages
Here it says custom JavaScript is supported, but it must not use jQuery which FV Player does: http://docs.apppresser.com/article/392-custom-javascript Perhaps it would to upload jQuery and FV Player scripts using the “Custom Javascript” feature seen on the previous documentation link? But I don’t think it would work.
What video types are you using? If it’s just plain MP4/HLS videos perhaps you should try to use
tags and see if the app work with it. Otherwise I recommend you ask the app support about iframe and why it won’t show for you when you use it as part of the post content.Thanks,
Martin
Can you tell me what I should upload into the custom javascript section, that may work… I have asked them for further help on it, waiting a response.
thank you so much for your help!
nate
Hello Nate,
are you able to put a script tag into it? Then you should try:
Then it should work if the app triggers the DOMContentLoaded JavaScript event each time you open some article.
If you can’t put in a script tag you can try to use JavaScript like this:
function loadScript( url, callback ) {
var script = document.createElement( "script" )
script.type = "text/javascript";
if(script.readyState) { //IE
script.onreadystatechange = function() {
if ( script.readyState === "loaded" || script.readyState === "complete" ) {
script.onreadystatechange = null;
callback();
}
};
} else { //Others
script.onload = function() {
callback();
};
}script.src = url;
document.getElementsByTagName( "head" )[0].appendChild( script );
}loadScript('https://your-site.com/wp-content/plugins/fv-wordpress-flowplayer/flowplayer/fv-flowplayer.min.js?ver=6.3.11', function() {
fv_player_load();
});
You haven’t answered the question about what video types you are using though, if it’s something that only plays with FV Player Pro, then that would have to be included too. So I suggest you do your first test with a simple MP4 file, like https://foliovision.com/videos/dominika-960-31.mp4
Thanks,
Martin
Hey Martin, sorry for not answering the question we use vimeo pro so mp4 and sometimes youtube videos.
I added the script tag to the header of the application, is that correct? I at least can now see functionality for full screen and such but the player still is encompassed in massive black spaces on top and bottom, is that correctable? Or is that because of the iframe loaded through the app?
Hello Nate,
I see it gets more and more tricky. I see now that the mobile app is not loading the FV Player CSS (as why would it? it doesn’t load the head section of HTML) – if you can add FV Player CSS from your site, there should a file like this: https://your-site.com/wp-content/fv-flowplayer-custom/style-1.css
To make YouTube and Vimeo play you will also have to take the fv_player_pro.min.js file and include it the same way as you did with fv-flowplayer.min.js – you can just add in another script tag or another loadScript() call, depends on what’s working.
However you will also have to set the fv_player_pro config variable. Please see the HTML code of any of your pages where a Vimeo video is embedded and you should be able to copy that whole
Hi Nathan,
To step back a bit here and see the big picture (implementation of FV Player via the WordPress REST API), here’s what I’d do.
i.e. I’d have my application check for the presence of FV Player in the content first.
If no player, then I’d not add or change anything to my existing app (assuming everything is working fine for content display).
If FV Player is present, then I’d include the normal CSS files and the JS files required for FV Player.
Martin will package up the full set of dependencies in one nice package for people using the WordPress REST API.
If you come up with some clever implementations of video via WordPress REST API, let us know so we can support them better and share them with the WordPress REST API community.
I’m a big supporter of the WordPress REST API but we haven’t come up with a use case for ourselves where it’s more useful than writing plugins to the existing CMS. As WordPress becomes more and more top heavy (Customizer, Gutenberg), I can see the REST API becoming more and more attractive for WordPress front end development.
Cheers, Alec
Hello again Martin is this the correct html to copy? I’m still working on the CSS additions you mentioned. Thank you so much for your help!!!
<![CDATA[*/var fv_flowplayer_conf={"fullscreen":"1","swf":"\/\/christianjournal.net\/wp-content\/plugins\/fv-wordpress-flowplayer\/flowplayer\/flowplayer.swf?ver=6.3.10","swfHls":"\/\/christianjournal.net\/wp-content\/plugins\/fv-wordpress-flowplayer\/flowplayer\/flowplayerhls.swf?ver=6.3.10","embed":{"library":"\/\/christianjournal.net\/wp-content\/plugins\/fv-wordpress-flowplayer\/flowplayer\/fv-flowplayer.min.js","script":"\/\/christianjournal.net\/wp-content\/plugins\/fv-wordpress-flowplayer\/flowplayer\/embed.min.js","skin":"\/\/christianjournal.net\/wp-content\/plugins\/fv-wordpress-flowplayer\/css\/flowplayer.css","swf":"\/\/christianjournal.net\/wp-content\/plugins\/fv-wordpress-flowplayer\/flowplayer\/flowplayer.swf?ver=6.3.10","swfHls":"\/\/christianjournal.net\/wp-content\/plugins\/fv-wordpress-flowplayer\/flowplayer\/flowplayerhls.swf?ver=6.3.10"},"speeds":[0.25,0.5,0.75,1,1.25,1.5,1.75,2],"video_hash_links":"","key":"$116471958910365","safety_resize":"1","logo":"https:\/\/christianjournal.net\/wp-content\/uploads\/2017\/10\/Christian-Journal-Logo-video.png","volume":"1","mobile_native_fullscreen":"","mobile_force_fullscreen":""};var fv_flowplayer_translations={"0":"","1":"Video loading aborted","2":"Network error","3":"Video not properly encoded","4":"Video file not found","5":"Unsupported video","6":"Skin not found","7":"SWF file not found","8":"Subtitles not found","9":"Invalid RTMP URL","10":"Unsupported video format. Try installing Adobe Flash.","11":"Click to watch the video","12":"[This post contains video, click to play]","video_expired":"<h2>Video file expired.<br \/>Please reload the page and play it again.<\/h2>","unsupported_format":"<h2>Unsupported video format.<br \/>Please use a Flash compatible device.<\/h2>","mobile_browser_detected_1":"Mobile browser detected, serving low bandwidth video.","mobile_browser_detected_2":"Click here","mobile_browser_detected_3":"for full quality.","live_stream_failed":"<h2>Live stream load failed.<\/h2><h3>Please try again later, perhaps the stream is currently offline.<\/h3>","live_stream_failed_2":"<h2>Live stream load failed.<\/h2><h3>Please try again later, perhaps the stream is currently offline.<\/h3>","what_is_wrong":"Please tell us what is wrong :","full_sentence":"Please give us more information (a full sentence) so we can help you better","error_JSON":"Admin: Error parsing JSON","no_support_IE9":"Admin: Video checker doesn't support IE 9.","check_failed":"Admin: Check failed.","playlist_current":"Now Playing","video_issues":"Video Issues","link_copied":"Video Link Copied to Clipboard","embed_copied":"Embed Code Copied to Clipboard","subtitles_disabled":"Subtitles disabled","subtitles_switched":"Subtitles switched to ","warning_iphone_subs":"This video has subtitles, that are not supported on your device.","warning_unstable_android":"You are using an old Android device. If you experience issues with the video please use Firefox<\/a>. Why?<\/a>","warning_old_safari":"You are using an old Safari browser. If you experience issues with the video please use Firefox<\/a> or other modern browser. Why?<\/a>"};var fv_fp_ajaxurl="https:\/\/christianjournal.net\/wp-admin\/admin-ajax.php";var fv_flowplayer_playlists=[];var fv_flowplayer_ad={"wpfp_f36494e1c64f679aabf6832b9723fb25":{"html":"<div class='wpfp_custom_ad_content' style='width: 100%; height: ; display:block;'>\n\t\t<div class='fv_fp_close'><\/a><\/div>\n\t\t\t<script async src=\"\/\/pagead2.googlesyndication.com\/pagead\/js\/adsbygoogle.js\"><\/script>\r\n<!-- responsive google ad -->\r\n<ins class=\"adsbygoogle\"\r\n style=\"display:block\"\r\n data-ad-client=\"ca-pub-9444855906373320\"\r\n data-ad-slot=\"8961221893\"\r\n data-ad-format=\"auto\"><\/ins>\r\n<script>\r\n(adsbygoogle = window.adsbygoogle || []).push({});\r\n<\/script>\n\t\t<\/div>","width":"100%","height":""}};/*]]>*/</script> <script type="text/javascript" src="https://christianjournal.net/wp-content/cache/minify/0d3b9.js?x16958"></script> <script type='text/javascript'>/*<![CDATA[*/var fv_player_pro={"ajaxurl":"https:\/\/christianjournal.net\/wp-admin\/admin-ajax.php","autoplay_once":"","chapters":[],"cloudfront":[""],"debug":"","lightbox_images":"","playlist":[],"start_end":[],"video_ads":{"wpfp_f36494e1c64f679aabf6832b9723fb25":[]},"youtube":"","video_ads_skip":"0"};var fv_player_pro_js_translations={"ad_duration":"This ad will end in 0 seconds","invalid_youtube":"Invalid Youtube video ID.","reload_page":"Please reload the page and try again.","reload_page_later":"Please reload the page and try again in a couple of minutes. ","required_type":"Couldn't find the required video type","skip_ad":"Skip","video_decryption_e":"Flash: Video Decryption Error.","video_expired":"Video file expired.<br \/>Please reload the page and play it again.","video_loaded":"Video loaded, click to play."};/*]]>*/</script> <script type="text/javascript" src="https://christianjournal.net/wp-content/cache/minify/51771.js?x16958"></script> <script type='text/javascript'>var fv_player_lightbox={"lightbox_images":"1"};</script> <script type="text/javascript" src="https://christianjournal.net/wp-content/cache/minify/f8e3f.js?x16958"></script>
Hello Nate,
your code is missing the opening script tag. It might work and it might not work, depending on the app – does it accept script tags or does it only accept straight JavaScript code? Based on that you might need to use loadScript() function as described before.
You should be able to get a hint about this from the mobile app developers if it has support. Based on that we can provide some documentation on how to do this.
Thanks,
Martin
Hey Alec, I am so sorry it has taken me so long to respond. Things have been quite crazy with the Holidays. That all sounds good to me, the only thing is, almost all of our reports (posts) use at least one instance of the player. I look forward to the rest api package from Martin!
Thank you so much and hope you had a good holiday!
Nate
Hello Nate,
could you please ask the mobile app developers what is the proper way of including extra CSS and JS? Can you link in individual CSS files using tag and can you include script tags?
Or are you limited to entering inline CSS and inline scripts? Please check one of my previous posts where I posted exact instructions – which of these worked? https://foliovision.com/support/fv-wordpress-flowplayer/how-to/accessing-video-player-through-wordpress-rest-api/#post-61928
Thanks,
Martin
Hello again! I actually have figured it out.
So there is a setting in the FV Player settings that sets the default player size, ours is set to 100% width x 600 height. As I change this setting it changes the entirety of the player.
If I set 250 for height it looks correct! However, when I adjust this setting it also changes the player size on desktop and when it replaces the wordpress player.
See here: https://christianjournal.net/video/hannity-the-media-are-addicted-to-hating-trump/
(Just a side note I have changed the setting back so you’ll have to see the attached screen shot.)
How can I go about setting this once for default and another for mobile etc?In addition, and I think this maybe java, the full screen option is failing to work on the preview app but there are too many variables to debug I need to see the app finished to further detail what exactly is causing the error. I added all java files to the theme folder of the respective mobile app, but I need a function to hook them in, which we can fix later if it is still an error.
Hey Martin to respond to your question I asked the same thing how can I hook the files, here is what the dev sent me.
“Hi Nate,
You can learn about enqueuing files/code to the header here and here.”The links are: https://developer.wordpress.org/reference/functions/wp_enqueue_script/
https://codex.wordpress.org/Plugin_API/Action_Reference/wp_enqueue_scripts
Hello Nate,
the is currently now way of setting one sitewide default width and height for desktop and one for mobile. You could only enforce it using the “fv_flowplayer_args_pre” filter if you can detect the mobile there: https://foliovision.com/player/advanced/api-programming -> Available WordPress filters
If you mean the REST API, then it seems you can detect it using this in your if statement:
defined( 'REST_REQUEST' )
I’m not sure what the mobile app developer is sending you tips about how to add JavaScript and CSS to WordPress when you need to add it to the mobile app. However you mentioned you put the JavaScript files into some mobile app theme folder and it works.
So I’m a bit confused, is the mobile app actually loading one of your WordPress themes in order to work?
Thanks,
Martin
Hello Martin, so basically when I purchased the plugin for the mobile app it came with both a functional plugin which grabs the files and posts and then a theme which is deactivated but utilized specifically for the mobile app.
The theme gets activated only from the mobile app and its a typical wordpress theme, obviously only built for mobile display though.
About the request for screen default, I think we will have to wait until I publish the app to make an adjustment because the preview app that I am currently using is, i think, only requesting the desktop browser size because even youtube videos display funny.
I placed the Java and CSS files directly into the theme files and then placed the Java into the folder that we talked about earlier for custom Java.
So I am just finishing up the app for beta and then i’ll submit it to google and we should be able to debug more from there. Martin you have been an incredible help!
Hello again! Well good news is that the app has been released so you can see what I am talking about by downloading it. We are on version 0.01 and it’s going to be a road to 1.0 but for now the video player is being requested through Iframe and when the iframe is requested we still get the two black boxes one on top and one on bottom. In addition, the full screen doesn’t work, but the player plays which is really good news!
To download: https://play.google.com/store/apps/details?id=com.thechristianjournal.appWhat I noticed is that when you turn the phone sideways the css malfunction corrects itself and plays correctly. The only issue is when you see the player in a vertical manner.
Nate
Hello Nathan,
Sorry for the late reply. We’ll check the issue in horizontal view on Monday and let you know what could be done.
Thanks,
Eduard
I have found what is causing the black boxes. It’s the ratio.
<div class=”fp-ratio” style=”padding-top: 56.25%;”></div>How can I change this?
Hello Nate,
that div element is there to make sure the player is sized properly in responsive designs. If it causes black bars above and below the videos in your mobile app, then I guess FV Player JavaScript is not getting the correct window width.
You can just try to hide .fp-ratio in your mobile app CSS and see if it helps.
Thanks,
Martin
