I am trying to play mp4 videos in IOS devices. But i cant. Please guide me. I am new to programming.
Here is my code...
jwplayer('myElement').setup({
file: "http://url",
'width': '560',
'height': '240',
'file': '/music/audio.mp3',
'controlbar': 'bottom'
});
You're giving it two different files, one an image and the other an audio file. You're using an attribute, controlbar, that doesn't exist in JW Player 6. Here are the JW Player embedding guidelines - if you don't see something listed there, it doesn't exist, and you can't just make things up:
http://support.jwplayer.com/customer/portal/articles/1413113-configuration-options-reference
Now, for a simple example:
http://misterneutron.com/JW6video/
The "home" link on that page will take you to a collection of simple examples, which should help.
A properly-encoded MP4 will be playable virtually everywhere. The player will use HTML5 on all mobile devices (there's no Flash on a mobile) and on all current desktop browsers. Only IE8 and Firefox on WinXP will drop back to Flash, and WinXP is dead, at least in the eyes of MS.
Change:
'file': '/music/audio.mp3',
To:
'type': 'mp4',
Since your mp4 file does not have an mp4 extension.
Related
I am trying to use the HTML5 video - https://developer.mozilla.org/en-US/docs/Web/HTML/Element/video to access camera on the device.
I am following this example - https://developer.mozilla.org/en-US/docs/Web/API/MediaStream_Recording_API/Recording_a_media_element to record the video.
It works perfectly in Chrome browser but does not seem to be working on Safari and iOS mobile app.
On debugging both captureStream() and mozCaptureStream() functions are undefined.
Any suggestions on how to fix this?
PS: Is this a known issue - https://bugs.webkit.org/show_bug.cgi?id=181663. Are there any workarounds? Thanks!
I don't think recording webcam as video is an available option on Apple devices.
It might be a licensing issue rather than a technical limitation.
It works perfectly in Chrome browser but does not seem to be working
on Safari and iOS mobile app. On debugging both captureStream() and
mozCaptureStream() functions are undefined.
Your link is recording into Google's own webM video which is a format not supported by Apple. The Safari browser cannot encode pixels as VP8 or VP9 to use inside webM container. Apple has an MPEG video license so for Safari, I expect MP4 to be their expected output (but is there a free H264 encoder inside Safari? Nope).
mozCaptureStream() is specific to Mozilla Firefox. Safari won't know/accept it.
captureStream() is not fully suppported on Safari. The missing part is the recording part.
Possible workarounds:
Try enabling MediaRecorder API in Safari settings.
Research (double-check) for known issues, like as mentioned at bottom of this read this article: https://blog.addpipe.com/safari-support-on-macos-beta/
If you can draw webcam to Canvas then consider bringing in your own (Javascript-based) H264 encoder (for MP4 video) or VP8/VP9 encoder (for webM video).
You can try: https://github.com/TrevorSundberg/h264-mp4-encoder.
Wait for webCodecs API to be added to Safari. Note in Chrome/Edge you can just use the built-in webCodecs API to encode video for MP4 or WebM formats. Safari has no free encoders and thus has no webCodecs API.
I've been banging my head on getting captureStream to work on iOS (Safari and Chrome, same results) to no avail. This reply by #VC.One helped me stop trying to use webM format, which was used by the sample code I was following from mdn which is here... https://developer.mozilla.org/en-US/docs/Web/API/MediaStream_Recording_API/Recording_a_media_element
So I simply switched to mp4 instead of webm, using .srcObject instead of .captureStream, and now I have things working on iOS. I still have a lot of clean-up to do, but when my solution is finished I will make a nice write-up and post back.
Also, someone pointed out that I needed to use the onloadedmetadata with the play method, in order to get a video element to show a real-time feed of bytes from getUserMedia, and that worked. Then I just needed to store the bytes somewhere that iOS will not freak out about (it does not support captureStream) and then it all came together. It definitely seems to be a licensing issue at the heart of it all, which is why this works using mp4 instead of webm.
I am trying to stream hls on safari iOS with Aframe that has three.js under the hood. But the video shows a black screen with just the audio playing. The video src is of type .m3u8. I tried to read through a lot of related posts but none seem to have a proper solution. Is it some kind of a wishful thinking getting HLS & WebGL to play on iOS? If not, can some one please help me with a solution.
A couple of discussions on the issues that are available on github:
HLS m3u8 video streaming
HLS on Safari
To your question:
Is it some kind of a wishful thinking getting HLS & WebGL to play on iOS?
Yes, wishful thinking :-) The problem/issue/bug is with Apple, not any library. No matter what the JS library, A-Frame, Three, etc, this will always be an issue on any browser in iOS (all browsers on iOS are basically wrappers for Safari), and OSX Safari.
The issue is this (from my understanding):
At some point in the history of WebGL, there were restrictions on cross-origin content (videos, images, etc). I can't find a source for this, but I remember reading it somewhere, so this might not be 100% accurate.
Recently (a couple years ago? 2015?) all major browsers came to the conclusion that cross-origin media for use in WebGL was safe. Except Apple/Safari.
For most browsers, the crossorigin attribute on a <video> element could signal that this content came from another source. In Safari, for whatever reason, this attribute is ignored or not implemented. In fact, it looks like WebKit, which Safari is based on, fixed this as far back as 2015, but Apple still does not implement it. Even Apple refuses to comment on any progress.
Possible workarounds:
WebGL on Safari works with progressive (not a stream like HLS/Dash) .mp4 videos. Check out any 360 video on Facebook (website, not app) in iOS/Safari, and you'll note the source is an .mp4.
Use HLS (or Dash), but play the video flat, without WebGL. Check out any 360 video on YouTube (website, not app), and I think they are using HLS or Dash, but the point is they stream the video, whereas Facebook doesn't.
Here's a good starting point to the real issue: link.
Here's another detailed thread: link.
https://github.com/video-dev/hls.js#compatibility
Please note: iOS Safari "Mobile" does not support the MediaSource API.
Safari browsers have however built-in HLS support through the plain
video "tag" source URL. See the example above (Getting Started) to run
appropriate feature detection and choose between using Hls.js or
natively built-in HLS support.
When a platform has neither MediaSource nor native HLS support, you
will not be able to play HLS.
<script src="https://cdn.jsdelivr.net/npm/hls.js#latest"></script>
<!-- Or if you want a more recent canary version -->
<!-- <script src="https://cdn.jsdelivr.net/npm/hls.js#canary"></script> -->
<video id="video"></video>
<script>
var video = document.getElementById('video');
if (Hls.isSupported()) {
var hls = new Hls();
hls.loadSource('https://video-dev.github.io/streams/x36xhzz/x36xhzz.m3u8');
hls.attachMedia(video);
hls.on(Hls.Events.MANIFEST_PARSED, function() {
video.play();
});
}
// hls.js is not supported on platforms that do not have Media Source Extensions (MSE) enabled.
// When the browser has built-in HLS support (check using `canPlayType`), we can provide an HLS manifest (i.e. .m3u8 URL) directly to the video element through the `src` property.
// This is using the built-in support of the plain video element, without using hls.js.
// Note: it would be more normal to wait on the 'canplay' event below however on Safari (where you are most likely to find built-in HLS support) the video.src URL must be on the user-driven
// white-list before a 'canplay' event will be emitted; the last video event that can be reliably listened-for when the URL is not on the white-list is 'loadedmetadata'.
else if (video.canPlayType('application/vnd.apple.mpegurl')) {
video.src = 'https://video-dev.github.io/streams/x36xhzz/x36xhzz.m3u8';
video.addEventListener('loadedmetadata', function() {
video.play();
});
}
</script>
I am using JW Player in my Ipad app. When I checking in the browser the vast tag is playing fine and after that content is loading.
But unlike that in Ipad VAST tag not playing and do skipped. Then content video is playing. I am using a crossdomain URL for VAST tag. But I have given the Access Control Allow Origin. But there is no good sound.
Is anyone experienced in this..?
Thanks in advance.
What kind of ad creative is returned by your ad tag? If it is a .swf or .flv, then it will not play on an iPad or any mobile device. Make sure to request MP4 or VPAID 2.0 ads from your ad network. You will also need JW Player 7.1 or higher for VPAID 2.0 support.
We love Stack Overflow, but we don't check for new posts very often. If you want support from JW Player directly, please go to http://jwplayer.com/support/
I've got a YouTube video I'm embedding in an iFrame. Here's the embed URL:
http://www.youtube.com/embed/-3W3xvAcD2Y
In the current versions of Safari, Mobile Safari, and Firefox on my Mac I get a doubled video (3D version?) once the video actually starts playing, as shown below:
(Note: the preview image looks normal, you have to actually start playing the video before it doubles like this.)
In Chrome I get the correct version:
Both are using the HTML5 player FWIW, and these embed links have been working for me until recently. I see the same results when actually embedding the links in an iFrame; it's just easier to link to the embed URL here. In my testing, I don't see this for all YouTube videos; it might be limited to videos that have been uploaded recently, but I'm not 100% sure on that (here's another example that shows the problem).
Any idea what is going on? Could this be an embed code error on YouTube that popped up recently? Give that URL a try and let me know if how it works on other browsers.
I'm having the same problem.
Looks like YouTube is forcing 3D on embeds for random HTML5 videos. I noticed mozstereomode="1" is being applied on videos that are having this issue.
I am writing application to show youtube videos.
In WPF on windows 7 I use WebBrowser control and it works fine. But when I use WinRT WebView control to show swf file from youtube - it doesn't work. Only clear white screen.
I use approach like that : http://blog.tedd.no/2010/06/27/embedding-youtube-in-wpf-webbrowser-control/
What shall I do to have an oppotunity to show videos in Metro Style Application?
Thank you
try this one from the mytoolkit library: http://mytoolkit.codeplex.com/wikipage?title=YouTube
The default youtube video player (unless the user has opted into the HTML5 preview) is a Flash video control. Flash is not supported in the Windows Application Store ("Metro") shell version of IE, or in the WebView control.
But what you can do is request youtube to use the HTML5 video player (HTML5 video is supported by the App Store version of IE and WebView). For example, this video does play properly for me:
<WebView Source="http://www.youtube.com/watch?v=cTl3U6aSd2w&html5=True" />
So you should be able to embed a video using a webview, you just have to force the webview to use the HTML5 viewer. This can also be done as a parameter to the embed URL: see Force HTML5 youtube video
However, this setting only says to prefer the HTML5 player. Youtube may still attempt to use the flash player on some videos, which will not work in all cases.
You can alternatively also play the video through "mediaelement" to play youtube video, though you'd have to parse the youtube video stream first. See my W8 app "RedditTV"