Update:
I did a fully build via Android studios, and the HTML5 Video does not work at all. It may be related to it targeting a web site? Though I can have the app open a website from the app directly, so maybe something else I am missing. I also tried with the video in the app directory, but again, it did not seem to load at all.
I am building a Cordova/Framework7 app that I need to embed videos into.
The video loads, and I can scroll back and forth through the video, but the giant PLAY button does not respond when touching it in app.
<video id='video' controls>
<source src="https://website.com/FancyVideo.mp4" type="video/mp4">
Your browser does not support HTML5 video
</video>
I've tried to make an event listener to trigger the video (with and without the onload bi)
window.onload = function() {
var video = document.getElementById('video');
video.addEventListener('click', function () {
video.play();
}, false);
}
So I am not sure what to do, it should work.
I have followed several other question threads but none seem to work, or are mostly obsolete. I have also tried media plugins with similar results.
HTML5 element on Android
html5 videos not showing controls on android once loaded
Note:
I am using
PhoneGap desktop application, and a Galaxy S7 running Android 8.0.0
Cordova Android Version 7.1.0
Cordova Version 8.0.0
Framework 7 Version 3.0.1
PhoneGap Version 8.0.0
Related
Has anyone encountered this problem?
Videos uploaded to an ASP.NET MVC5 website from a browser on a Windows PC or from an Android phone play back fine in any browser, on Android and even Windows Mobile but are not visible on iPhone.
The gallery code looks something like:
<div id="link_#fileViewModel.ID" class="row gallery-media-file">
<a href="#Url.Action("GetVideoFile", "File", new {id = fileViewModel.ID})" type="video/mp4" title="#videoViewModel.Title" class="m-0">
<video class="img-responsive">
<source src="#Url.Action("GetVideoFile", "File", new {id = fileViewModel.ID})" type="video/mp4" />
</video>
</a>
The server is IIS8 and has Application Request Routing Cache installed to handle byte range segment size.
Video is stored in the backend DB and served with the following action:
public void GetVideoFile(Guid id)
{
var file = _fileProcessor.Get(id);
Response.ContentType = file.MimeType;
Response.BinaryWrite(file.Data);
}
Any ideas... I'm stumped?
EDIT:
Files are uploaded using Dropzone.js -> https://www.dropzonejs.com/
EDIT2:
I'm also using the blueimp gallery to display files but it turns out removing the attribute:
type="video/mp4"
from the anchor tag allows the video to play on iPhone.
Unfortunately, it does not show a still of the video though and also plays without sound. Additionally, when the type attribute is removed from the anchor tag, it stops playing in the gallery on desktop and android.
Ultimately, I may have to render the html conditionally according to the client but the volume and video image capture is still a problem.
The following has been some help, but still no joy: HTML5 Video tag not working in Safari , iPhone and iPad
I'm trying to embed Twitch player using Javascript API - here is documentation how to embed a player using swfobject - https://github.com/justintv/Twitch-API/blob/master/player.md. My Problem is that the code works great on desktop, but on mobile browsers - iOS (I haven't had a chance to check Android yet) script simply doesn't embed a video. It works when I use iframe method though. Is there any fix for iOS to make this works using JS API and swfobject?
swfobject is the flash player (swf = ShockWave Flash). Flash does not, and never will, work on iOS. The iframe method runs coder that detects the OS, and loads the native iOS player on iOS, and flash for everything else. You need to duplicate that functionality.
I am creating a cordova jquery mobile app. which play video in it. I have tried video tag but it is not showing the video only sound is played .
Now I want to open android video player to play my video url.
You can try this: FileOpener Plugin
Video tag have too much issue with different platform and version on Android, if you want to avoid that, Crosswalk is a good solution.
I'm aiming to have a sound occur when the user presses a certain button.
This is working on my desktop and in Chrome on my Android 4.4 phone but when I launch this as a cordova app the audio stops working.
<audio hidden='true' id='win-audio'>
<source src='audio.mp3' type='audio/mpeg' />
</audio>
with the following being called when a click event happens
document.querySelector('#win-audio').load();
document.querySelector('#win-audio').play();
I have tried using a <video> tag instead (with the same mp3 loaded). I've also tried the ogg format in case it's a codec issue but with no luck.
On PhoneGap people solve this using the Media plugin - I'd rather do this properly using HTML5 audio but if that's impossible, is there an equivalent for Mobile Chrome Apps?
After trying many solutions I discovered that we can use the Cordova media plugin to substitute for lack of HTML5 audio support.
First install the plugin from the command line from within your project directory using cca plugin add org.apache.cordova.media
Next add the following line to your config.xml file:
<plugin name="Media" value="org.apache.cordova.AudioHandler" />
You can then use the new Media object from within Javascript as follows:
var audio = new Media('/android_asset/www/path_to_your.mp3');
audio.play();
Note that you must issue the correct path that Cordova expects, which is NOT relative to the Javascript file the code is in. The above will work for Android, and to support iOS see: iOS Phonegap Media Object - How do I access a resource in the WWW folder?
I have a rather peculiar problem.
I made a website, that streams from various sources, all m3u8 links (Apple HLS). I successfully made it using a viewright player but I wanted to support mobile devices so I set it up with videojs - and it works perfectly. With the current setup people have to install a viewright plugin, which is fine, but I want to avoid that by using html5 and make it more userfriendly.
I have tried both using CDN and Self-hosting as described here:
https://github.com/videojs/video.js/blob/v4.3.0/docs/guides/setup.md
My videojs related code is as follows:
head:
<link href="//vjs.zencdn.net/4.2/video-js.css" rel="stylesheet">
<script src="//vjs.zencdn.net/4.2/video.js"></script>
Body:
<div class="row">
<div class="span7">
<video id="vid" class="video-js vjs-default-skin"
controls preload="auto" width="640" height="640"
poster="my_video_poster.png"
data-setup="{}">
</video>
</div>
<script>
var myPlayer = _V_('vid');
function changeChannel(url, chanid)
{
myPlayer.src(url);
myPlayer.play();
}
</script>
In body there is also the list of streams, ofcourse. When you click on a link it changes to that stream.
Example:
StreamName
Again - the code works perfectly on my android phone (chrome) and iphone (safari) so I'm utterly confused by this.
Thanks if you know something!
edit:
In the console, when loading the page it says
ReferenceError: V is not defined
and when I load a stream it says:
TypeError: myPlayer is undefined
I tried replacing V with videojs and VideoJS (as found on other SO post) but it just said that videojs/VideoJS was not defined then.
There are some additions to video.js that will get it to play HLS content on desktop browsers.
Check out the flashls project on github, which for videojs uses a modified swf file available here under the video-js-swf project on github.
Also check out this version which is Javascript based: https://github.com/videojs/videojs-contrib-hls
First off, Apple HLS is not supported by the major desktop browsers, namely Chrome, Firefox and IE (I dont know about Opera but I doubt it). Safari on OSX supports it, Safari on Windows does not :)
Chromium and Firefox teams both have open tickets on implementing support for HLS through the HTML5 video tag, but I don't think this is going to happen soonish (Firefox has this ticket open since 3 years now ;) ). Remember that Apple HLS is in no way directly part of the HTML5 standard. The only widely supported formats are WebM / MKV / Ogg, using VP8 / Theora codec (since they are supported by both FF and Chrome).
Mobile devices running iOS with Safari therefore support HLS, and so does Chrome on iOS, since it is actually using a Safari WebKit pane to render the HTML. Also, the browser that comes with Android supports HLS (and so does the Android media framework natively), as Android developers were obviously concerned about matching compatibility with iOS enabled mobile sites.
However, Chrome (and IE) support also the MPEG-4 / H.264 codec.
IE support ONLY MP4.
Videojs has a fallback solution in Flash that is replacing the video tag when you want to player MPEG-4 on Firefox. So that is taken care off, at least.
Welcome to video streaming standards madness.
That said, you will probably have to review your video delivery strategy if you want to deliver to other desktop browser than only Safari on OSX ;) If you are using Videojs anyway , I would recommend you MPEG-4, as then you will have full browser compatibility.
However, knowing Videojs, I would say that it should throw an appropriate error when it encounters a format that is not supported on the platform.
Therefore, I think your problem is (not only) format related? Try to load any other WebM example file into your Videojs setup on Chrome or FF desktop browsers to see if that works. If it does, then obviously M3U8 / HLS format is messing up Videojs on desktop, and that would be a Videojs ticket. But, anyway, HLS wont work on desktop any way, for now.