• Skip to content
  • Skip to primary sidebar
  • Skip to footer

Foliovision

Main navigation

  • Weblog
    • FV Player
    • WordPress
    • Video of the Week
    • Case Studies
    • Business
  • About
    • Testimonials
    • Meet the Team
    • We Support
    • Careers
    • Contact
    • Pricing
  • Products
  • Support
    • FV Player Docs
    • Pro Support
  • Login
  • Basket is empty

Accessing Video PLayer Through Wordpress REST API

Foliovision › Forums › FV Player › How to … › Accessing Video PLayer Through Wordpress REST API

  • Nathan 7 years, 5 months ago
    Avatar photo

    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

Viewing 28 replies - 1 through 28 (of 28 total)
  • Martin 7 years ago

    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

    Nathan 7 years ago
    Avatar photo

    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?

    Eduard 7 years ago
    Avatar photo

    Hi Nathan,

    Were you using our iframe embedding button to generate the code or did you use the video URL?

    Thanks,
    Eduard

    Nathan 7 years ago
    Avatar photo

    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.

    screen-shot-2017-12-15-at-8-07-45-am
    Screen-Shot-2017-12-15-at-8.07.45-AM
    screen-shot-2017-12-15-at-8-05-35-am
    Screen-Shot-2017-12-15-at-8.05.35-AM
    screen-shot-2017-12-15-at-8-05-02-am
    Screen-Shot-2017-12-15-at-8.05.02-AM
    Eduard 7 years ago
    Avatar photo

    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

    Nathan 7 years ago
    Avatar photo

    Apologies, yes I tried both and neither worked.

    Martin 7 years ago

    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

    Nathan 7 years ago
    Avatar photo

    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/

    Nathan 7 years ago
    Avatar photo

    I can confirm that the test page will not load the embed code you provided

    Martin 7 years ago

    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

    Nathan 7 years ago
    Avatar photo

    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

    Martin 7 years ago

    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

    Nathan 7 years ago
    Avatar photo

    Hey Martin, sorry for not answering the question we use vimeo pro so mp4 and sometimes youtube videos.

    Nathan 7 years ago
    Avatar photo

    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?

    Martin 7 years ago

    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

    Alec Kinnear 7 years ago
    Avatar photo

    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

    Nathan 7 years ago
    Avatar photo

    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>

    Martin 7 years ago

    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

    Nathan 7 years ago
    Avatar photo

    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

    Martin 7 years ago

    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

    Nathan 7 years ago
    Avatar photo

    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.

    screen-shot-2018-01-09-at-2-51-32-pm
    Screen-Shot-2018-01-09-at-2.51.32-PM
    Nathan 7 years ago
    Avatar photo

    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

    Martin 7 years ago

    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

    Nathan 7 years ago
    Avatar photo

    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!

    Nathan 7 years ago
    Avatar photo

    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.app

    What 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

    Eduard 7 years ago
    Avatar photo

    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

    Nathan 7 years ago
    Avatar photo

    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?

    Martin 7 years ago

    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

Viewing 28 replies - 1 through 28 (of 28 total)
Reply To: Accessing Video PLayer Through Wordpress REST API



Please Sign in or Register to upload files.

Related Posts

  1. QUESTION: “WordPress Video Shortcode” vs FV Player in AMP modus. Same player?

    QUESTION: “WordPress Video Shortcode” vs FV Player in AMP modus. Same player?

  2. Huge pause icons appear over player and rest of page

    Huge pause icons appear over player and rest of page

  3. FV WordPress Flowplayer is compatible with WordPress 3.0

    FV WordPress Flowplayer is compatible with WordPress 3.0

Primary Sidebar

Sign in Register
FV Player Docs Post New Topic

Welcome

to Foliovision support forums! We'll be happy to provide free support to resolve all the reported bugs. You always can start by specifying your OS and browser and steps to reproduce the bug.

If you need help with the installation on your site, please submit a request for a Pro Support Incident. We'll have you up and running in no time, with detailed instructions on how to resolve your issue yourself in the future.

Facing a hard to solve WordPress problem? On a tight deadline?

Let us take care of it for you
right now.

Pro Support Buy FV Player

Footer

Our Plugins

  • FV WordPress Flowplayer
  • FV Thoughtful Comments
  • FV Simpler SEO
  • FV Antispam
  • FV Gravatar Cache
  • FV Testimonials

Free Tools

  • Pandoc Online
  • Article spinner
  • WordPress Password Finder
  • Delete LinkedIn Account
  • Responsive Design Calculator
Foliovision logo
All materials © 2025 Foliovision s.r.o. | Panská 12 - 81101 Bratislava - Slovakia | info@foliovision.com
  • This Site Uses Cookies
  • Privacy Policy
  • Terms of Service
  • Site Map
  • Contact
  • Tel. ‭+421 2/5292 0086‬

We are using cookies to give you the best experience on our website.

You can find out more about which cookies we are using or switch them off in .

Powered by  GDPR Cookie Compliance
Privacy Overview

This website uses cookies so that we can provide you with the best user experience possible. Cookie information is stored in your browser and performs functions such as recognising you when you return to our website and helping our team to understand which sections of the website you find most interesting and useful.

Necessary Cookies

Strictly Necessary Cookie allow you to log in and download your software or post to forums.

We use the WordPress login cookie and the session cookie.

If you disable this cookie, we will not be able to save your preferences. This means that every time you visit this website you will need to enable or disable cookies again.

Support Cookies

Foliovision.com uses self-hosted Rocket.chat and self-hosted Freescout support desk to provide support for FV Player users. These cookies allow our visitors to chat with us and/or submit support tickets.

We are delighted to recommend self-hosted Rocket.chat and especially Freescout to other privacy-conscious independent publishers who would prefer to self-host support.

Please enable Strictly Necessary Cookies first so that we can save your preferences!

3rd Party Cookies

This website uses Google Analytics and Statcounter to collect anonymous information such as the number of visitors to the site, and the most popular pages.

Keeping this cookie enabled helps us to improve our website.

We reluctantly use Google Analytics as it helps us to test FV Player against popular Google Analytics features. Feel free to turn off these cookies if they make you feel uncomfortable.

Statcounter is an independent Irish stats service which we have been using since the beginning of recorded time, sixteen years ago.

Please enable Strictly Necessary Cookies first so that we can save your preferences!