PhoneGap iOS Can't Play Videos Using HTML 5
I am creating a phonegap app and I need to play a video. I know in order to play videos on Android I need to use one of the available plugins, but to play videos on iOS I can use the HTML 5 tag. I have the following lines of code:
<div id="video">
<video id="video01" width="300" height="300" controls>
<source src="images/test2.mp4" type="video/mp4" />
</video>
</div>
I can see the "video window", but for some reason I cannot play the video. I don't see any errors in the console.
The video I'm using is on this page: http://www.quirksmode.org/html5/tests/video.html
And in iPhone Safari, I can download MP4 version from this page without problem.
source to share
I know it has been a while, but I was looking at some of my old questions and I noticed that I completely forgot to post the solution to my problem.
In the end I was able to fix the problem with the Cordova File api and the solution looks like something. eg:
window.requestFileSystem(LocalFileSystem.PERSISTENT, 0, function (fileSystem) {
console.log("gotFS");
getFolder(fileSystem, "video", function(folder) {
filePath = folder.toURL() + "\/" + "videotest.mp4";
playVideo(filePath);
}, function() {
console.log("failed to get folder");
});
},
function() {
console.log("failed to get filesystem");
});
function playVideo(uri) {
var player = document.getElementById("videoPlayer");
var source = document.createElement("source");
source.src = uri;
source.type = "video/mp4";
player.appendChild(source);
player.load();
}
source to share