I have a file produced from an encoding process that is in H.264 Annex B format, not wrapped in any container like MP4. I'm trying to figure out how to make this file playable in browser using <video> element. No matter what MIME type I try, it fails.
I know the file is good and browser has necessary facilities to decode it, because a) same exact content was previously streamed for WebRTC session that browser was able to decode and play, and b) the saved file is trivially playable with ffplay myfile.h264.
The HTML attempted for playing that file used the following <source> elements (ignore non-HTML formating pieces as those are cut from source-code directly):
<source src={this.props.src} type={'video/avc'} />
<source src={this.props.src} type={'video/H264-SVC'} />
<source src={this.props.src} type={'video/H264'} />
<!-- Ones below are more of a desperation attempts :) -->
<source src={this.props.src} type={'video/mp4'} />
<source src={this.props.src} type={'video/mp4; codecs="avc1.66.13, mp4a.40.2"'} />
<source src={this.props.src} type={'video/mp4; codecs="avc1.42e01e, mp4a.40.2"'} />
<source src={this.props.src} type={'video/mp4; codecs="avc1.42e01e, mp4a.40.2"'} />
<source src={this.props.src} type={'video/mp4; codecs="avc1.66.30, mp4a.40.5"'} />
<source src={this.props.src} type={'video/mp4; codecs="avc1.42001e, mp4a.40.5"'} />
<source src={this.props.src} type={'video/mp4; codecs="avc1.42001f, mp4a.40.5"'} />
<source src={this.props.src} type={'video/mp4; codecs="avc1.77.30, mp4a.40.5"'} />
<source src={this.props.src} type={'video/mp4; codecs="avc1.4d001e, mp4a.40.5'} />
<source src={this.props.src} type={'video/mp4; codecs="avc1.4d001f, mp4a.40.5"'} />
<source src={this.props.src} type={'video/mp4; codecs="avc1.640029, mp4a.40.5'} />
<source src={this.props.src} type={'video/mp4; codecs="mp4a.40.2"'} />
<source src={this.props.src} type={'video/mp4; codecs="avc1.4d002a"'} />
<source src={this.props.src} type={'video/mp4; codecs="avc1.4d001e, mp4a.40.2"'} />
<source src={this.props.src} type={'application/x-mpegurl'} />
<source src={this.props.src} type={'application/vnd.apple.mpegurl'} />
None work.
Since browser can play it via WebRTC channel, and since it's trivially playable using ffplay (that is, format is self-describing and contains all necessary info for playback), I'd expect <video> to be able to play it.
Also small note, Android references AVC (aka h264) codec as video/avc, so that's where I pulled that one from, but that still fails.
What's the proper MIME type for playing straight up H.264 AVC content?
Related
Recently I have installed cordova into a VueJS project and almost everything works fine, but statics files are not found like images and I didnt figure out why.
I read something about relative paths like ../../assets and I tried to change to assets/ just to see if works but didnt.
Using scss, images are normally imported with require(../../assets so I tried to change all my img src to :src="require(../../assets)" but still have no success.
I never had to install cordova in a running project, so I didnt know if I'm missing some config.
Here is my src-cordova/config.js
<?xml version='1.0' encoding='utf-8'?>
<widget id="medcof.app.io" version="1.0.0" xmlns:android="http://schemas.android.com/apk/res/android" xmlns="http://www.w3.org/ns/widgets" xmlns:cdv="http://cordova.apache.org/ns/1.0">
<name>MedCofQBank</name>
<description>
A sample Apache Cordova application that responds to the deviceready event.
</description>
<author email="dev#cordova.apache.org" href="http://cordova.io">
Apache Cordova Team
</author>
<!-- this hook will point your config.xml to the DevServer on Serve -->
<hook type="after_prepare" src="../node_modules/vue-cli-plugin-cordova/serve-config-hook.js" />
<!-- this hook will point your config.xml to the DevServer on Serve -->
<hook type="after_prepare" src="../node_modules/vue-cli-plugin-cordova/serve-config-hook.js" />
<content src="index.html" />
<access origin="*" />
<allow-intent href="http://*/*" />
<allow-intent href="https://*/*" />
<allow-intent href="tel:*" />
<allow-intent href="sms:*" />
<allow-intent href="mailto:*" />
<allow-intent href="geo:*" />
<platform name="android">
<edit-config file="app/src/main/AndroidManifest.xml" mode="merge" target="/manifest/application">
<application android:usesCleartextTraffic="true" />
</edit-config>
</platform>
<platform name="ios">
<allow-intent href="itms:*" />
<allow-intent href="itms-apps:*" />
</platform>
<preference name="AndroidPersistentFileLocation" value="Compatibility" />
</widget>
I have created an ionic application and when I load my application after splash screen and before login page a white flicker comes for about 3-4 seconds. But I want to remove it in my application .So please suggest how to do it.
<preference name="SplashMaintainAspectRatio" value="true" />
<preference name="FadeSplashScreenDuration" value="300" />
<preference name="SplashShowOnlyFirstTime" value="false" />
<preference name="SplashScreen" value="screen" />
<preference name="SplashScreenDelay" value="3000" />
first you have to add below preference in config.xml file
<preference name="SplashMaintainAspectRatio" value="true" />
<preference name="FadeSplashScreenDuration" value="300" />
<preference name="FadeSplashScreen" value="true" />
<preference name="AutoHideSplashScreen" value="false" />
<preference name="ShowSplashScreen" value="true" />
then use this "cordova-plugin-splashscreen" and check this link to add this plugin
splash screen cordova plugin
and in app.component.ts in intializeApp folder or in custructor put this code
this.platform.ready().then(() => {
this.splashScreen.hide();
});
and make sure when you make production build then use ionic cordova build android --prod.
I hope this will help you.
Getting ERR_CLEARTEXT_NOT_PERMITTED error. I have tried every thing change my config.xml , network_config getting update automatically when i add my domain. ionic cli is 5.4.13
<?xml version='1.0' encoding='utf-8'?>
<widget id="io.ionic.starter" version="0.0.1" xmlns="http://www.w3.org/ns/widgets" xmlns:android="http://schemas.android.com/apk/res/android" xmlns:cdv="http://cordova.apache.org/ns/1.0">
<name>MyApp</name>
<description>An awesome Ionic/Cordova app.</description>
<author email="hi#ionicframework.com" href="http://ionicframework.com/">Ionic Framework Team</author>
<content src="index.html" />
<access origin="*" />
<allow-intent href="http://*/*" />
<allow-intent href="https://*/*" />
<allow-intent href="tel:*" />
<allow-intent href="sms:*" />
<allow-intent href="mailto:*" />
<allow-intent href="geo:*" />
<preference name="ScrollEnabled" value="false" />
<preference name="android-minSdkVersion" value="19" />
<preference name="BackupWebStorage" value="none" />
<preference name="SplashMaintainAspectRatio" value="true" />
<preference name="FadeSplashScreenDuration" value="300" />
<preference name="SplashShowOnlyFirstTime" value="false" />
<preference name="SplashScreen" value="screen" />
<preference name="SplashScreenDelay" value="3000" />
<platform name="android">
<access origin="*" />
<preference name="android-usesCleartextTraffic" value="true" />
<allow-navigation href="*" />
<edit-config file="app/src/main/AndroidManifest.xml" mode="merge" target="/manifest/application" xmlns:android="http://schemas.android.com/apk/res/android">
<application android:networkSecurityConfig="#xml/network_security_config" />
<application android:usesCleartextTraffic="true" />
</edit-config>
<resource-file src="resources/android/xml/network_security_config.xml" target="app/src/main/res/xml/network_security_config.xml" />
<allow-intent href="market:*" />
</platform>
</widget>
You can use ionic cordova http plugin for network request your error maybe solve.
Here is link for that
https://ionicframework.com/docs/native/http
Good day, I'm trying to log in with google and my config.xml file I have it this way
<?xml version='1.0' encoding='utf-8'?>
<widget id="com.terabit.facilpark" version="1.0.0" xmlns="http://www.w3.org/ns/widgets" xmlns:cdv="http://cordova.apache.org/ns/1.0">
<hook src="hooks/hookers.js" type="before_prepare" />
<hook src="hooks/beforedep.js" type="before_deploy" />
<name>FacilPark</name>
<description>
</description>
<preference name="AndroidLaunchMode" value="singleTask" />
<universal-links>
<host name="facilpark19.page.link" scheme="https" />
<host name="facilpark-bdfd1.firebaseapp.com" scheme="https">
<path url="/__/auth/callback" />
</host>
</universal-links>
<author email="dev#cordova.apache.org" href="http://cordova.io">
Terabit
</author>
<content src="index.html" />
<access origin="*" />
<allow-intent href="http://*/*" />
<allow-intent href="https://*/*" />
<allow-intent href="tel:*" />
<allow-intent href="sms:*" />
<allow-intent href="mailto:*" />
<allow-intent href="geo:*" />
<platform name="android">
<allow-intent href="market:*" />
</platform>
<platform name="ios">
<allow-intent href="itms:*" />
<allow-intent href="itms-apps:*" />
</platform>
<allow-navigation href="*" />
<plugin name="cordova-plugin-whitelist" spec="^1.3.3" />
<plugin name="cordova-plugin-buildinfo" spec="^2.0.2" />
<plugin name="cordova-plugin-browsertab" spec="^0.2.0" />
<plugin name="cordova-plugin-inappbrowser" spec="^3.0.0" />
<plugin name="cordova-plugin-customurlscheme" spec="^4.3.0">
<variable name="URL_SCHEME" value="com.terabit.facilpark" />
</plugin>
<plugin name="cordova-universal-links-plugin" spec="~1.2.1" />
<plugin name="cordova-plugin-geolocation" spec="^4.0.1" />
<plugin name="cordova.plugins.diagnostic" spec="^4.0.10" />
<plugin name="cordova-open-native-settings" spec="^1.5.2" />
<plugin name="cordova-plugin-device" spec="^2.0.2" />
<engine name="browser" spec="^5.0.2" />
<engine name="android" spec="^7.0.0" />
</widget>
and the motod to initiate session in the following way:
loginGoogle(){
console.log("LOGIN GOOGLE");
const provider = new firebase.auth.GoogleAuthProvider();
firebase.auth().signInWithRedirect(provider).then(function() {
return firebase.auth().getRedirectResult();
}).then(result =>{
// This gives you a Google Access Token. You can use it to access the Google API.
console.log("AUTENTICACION POR GOOGLE EXITOSA")
this.completarInicio(user);
//this.$router.replace('home');
console.log(result);
var token = result.credential.accessToken;
// The signed-in user info.
var user = result.user;
// ...
}).catch(function(error) {
// Handle Errors here.
var errorCode = error.code;
var errorMessage = error.message;
// The email of the user's account used.
var email = error.email;
// The firebase.auth.AuthCredential type that was used.
var credential = error.credential;
// ...
});
},
The problem I have is to log in from the application, after having selected the google account and enter password I get the following message:
How can I correct the above mentioned, thank you very much.
Go to your Firebase Console, and on the Project Overview page there's a very small button called Add App. Select the OS and then enter your app bundle id.
I've bridged JS TileMap for my spritekit game. I've put a tmx file in my project and I'm trying to init a JSTileMap object
let map = JSTileMap(fileNamed: "level 1-1.tmx")
i get this error
2014-11-15 17:43:03.428 MyGame[5726:1901295] * Terminating app due to uncaught exception 'NSInvalidArgumentException', reason: '* -[NSKeyedUnarchiver initForReadingWithData:]: incomprehensible archive (0x3c, 0x3f, 0x78, 0x6d, 0x6c, 0x20, 0x76, 0x65)'
*** First throw call stack:
(
Could it be that it's not finding the file? I noticed if i change the filename to something nonexistent i get the same error..
Here is the contents of my tmx file
<?xml version="1.0" encoding="UTF-8"?>
<map version="1.0" orientation="orthogonal" width="1000" height="800" tilewidth="1" tileheight="1">
<tileset firstgid="1" name="enemies" tilewidth="80" tileheight="75">
<tile id="0">
<properties>
<property name="name" value="EnemyA"/>
</properties>
<image width="66" height="75" source="../Atlases/iPhone/enemyA.atlas/enemy#2x.png"/>
</tile>
<tile id="1">
<image width="65" height="67" source="../Atlases/iPhone/enemyB.atlas/enemy#2x.png"/>
</tile>
<tile id="2">
<properties>
<property name="name" value="EnemyC"/>
</properties>
<image width="60" height="60" source="../Atlases/iPhone/enemyC.atlas/enemy#2x.png"/>
</tile>
<tile id="3">
<image width="61" height="65" source="../Atlases/iPhone/enemyD.atlas/enemy#2x.png"/>
</tile>
<tile id="4">
<image width="74" height="58" source="../Atlases/iPhone/enemyE.atlas/enemy#2x.png"/>
</tile>
<tile id="5">
<properties>
<property name="name" value="EnemyF"/>
</properties>
<image width="80" height="73" source="../Atlases/iPhone/enemyF.atlas/enemy#2x.png"/>
</tile>
</tileset>
<objectgroup color="#000000" name="Object Layer 1">
<object name="EnemyA" type="enemy" gid="1" x="137" y="489"/>
<object name="EnemyC" type="enemy" gid="6" x="468" y="454"/>
<object name="EnemyB" type="enemy" gid="3" x="310" y="321"/>
</objectgroup>
</map>
i've tried editing it down to just and it still throws that error. I'm making sure to include libz.dylib
what am i doing wrong?
I was using the wrong init method
it should be
let map = JSTileMap(named: "level 1-1.tmx")
Try to remove #2 from your image files source.. Then run it again. I think you cannot use #2 in tiled. Also remove spaces from you tmx name.