Videos on iOS devices not playing

[Yehia Abdel Salam]

Hi,

I tried to add a video tag from the wordpress editor in one of the units to show up on the mobile app:


[video width="854" height="480" mp4="https://www.cheshmecreativechallenges.com/wp-content/uploads/2018/11/42ad92dcc1431da6c75f79723066266c12066228-480p__91401.mp4"][/video]


It works perfectly on Android, however on iOS 12 i get a blank screen https://ibb.co/4jnv3tz

I made sure to add the Content-Secutiry-Policy as suggested here https://stackoverflow.com/questions/34374139/how-to-play-an-html-5-video-in-cordova-ios-app as well as setting AllowInlineMediaPlayback to true. But still no luck. Please help.

[Alex]

Please try to remove the cordova-plugin-console by running this command :

cordova plugin rm cordova-plugin-console

Also please share whole error in a txt file to check this further .

IONIC INFO :

cli packages: (/usr/local/lib/node_modules)

@ionic/cli-utils  : 1.19.1

ionic (Ionic CLI) : 3.19.1

global packages:

cordova (Cordova CLI) : 8.0.0

local packages:

@ionic/app-scripts : 3.1.8

Cordova Platforms  : ios 4.5.4

Ionic Framework    : ionic-angular 3.9.2

System:

ios-deploy : 1.9.2

Node       : v6.11.4

npm        : 3.10.10

OS         : macOS High Sierra

Xcode      : Xcode 9.0 Build version 9A235

Environment Variables:

ANDROID_HOME : not set

Misc:

backend : pro

Cordova plugins and their versions :

cordova-plugin-camera 4.0.2 “Camera”

cordova-plugin-console 1.1.0 “Console”

cordova-plugin-device 2.0.1 “Device”

cordova-plugin-facebook4 2.0.1 “Facebook Connect”

cordova-plugin-file 6.0.1 “File”

cordova-plugin-file-transfer 1.7.1 “File Transfer”

cordova-plugin-googleplus 5.3.0 “Google SignIn”

cordova-plugin-inappbrowser 2.0.2 “InAppBrowser”

cordova-plugin-inapppurchase 1.1.0 “In App Purchase”

cordova-plugin-ionic-keyboard 2.0.5 “cordova-plugin-ionic-keyboard”

cordova-plugin-ionic-webview 1.1.16 “cordova-plugin-ionic-webview”

cordova-plugin-splashscreen 5.0.2 “Splashscreen”

cordova-plugin-statusbar 2.4.2 “StatusBar”

cordova-plugin-whitelist 1.3.3 “Whitelist”

cordova-sqlite-storage 2.0.4 “Cordova sqlite storage plugin”

ionic-plugin-keyboard 2.2.1 “Keyboard”.

config.xml file and package.json files : https://bit.ly/2ABXQ34

You can take backup of your ionic setup rename the package.json file and node_modules folder .

then you have to add the given config.json file to your project and open terminal and run :

npm install

After that please check for the corodova plugins .

Install the cordova plugins with their versions mentioned above .

example :

cordova plugin add {cordova plugin name}@{version} 

• cordova plugin add [email protected]

[Alex]

Please do take backup of your current setup before doing above .

[Yehia Abdel Salam]

okay it looked like another iframe element on the same unit was causing the problem. So I have a question, which way of adding videos while composing the unit in wordpress backend works on iOS and Android device:

• Is it using the video short code of wordpress
• Using Vibe shortcode for adding video and adding the iframe code
• Normal html video tag

[Alex]

Well yes the video tag will work in units , there is a provision added for iframe, iframevideo , wplms_vimeo , wplms_s3 shortcodes to work in app .

You just need to make sure that your unit type is set to  ” video ” . : http://prntscr.com/k2ewg6

 

use the iframevideo shortcode like this :

[iframevideo]iframe-code[/iframevideo]

example :

[iframevideo]<iframe src="https://www.youtube.com/embed/MFtX9ussRKk" width="560" height="315" frameborder="0" allowfullscreen=""></iframe>[/iframevideo]

 

[Author]

Posts