I am new in implementing bitrate streamable videos in react-js. I am trying to stream HLS videos using video-js in webview and HLS videos are working as expected in the web app but when i test it on webview the videos are not switching to low resolutions even when internet speed is very low. Videos are rather playing in higher resolution only. I am little confused on whether it is a videojs library issue or a Webview issue and how can i resolve it ?
i have tried using videojs-http-streaming attributes like this-
html5: {
vhs: {
overrideNative: true,
enableLowInitialPlaylist: true
},
nativeAudioTracks: false,
nativeVideoTracks: false
}
Videojs version - 7.17.0
Thanks in advance!!!
Related
I have created a video serving service, in my application is use hls format for videos and for playing videos i use flowplayer.
the problem i faced is that in my m3u8 files, i have this url for first part of ts file.
http://****/videos/2017/9/39594b34-e06e-415b-a176-c6971fe28190/b7f1d54e-4543-4852-9fbe-75693c2bfe58-3600.ts
here is my html configuration for flowplayer
<div id="hlsjsvod">
and here is my javascript configuration for flowplayer
flowplayer("#hlsjsvod", {
splash: true,
aspectRatio: "16:9",
clip: {
// enable hlsjs in desktop Safari for manual quality selection
// CAVEAT: may cause decoding problems with some streams!
hlsjs: {
safari: true,
xhrSetup: function (xhr, url) {
url.replace("http","https")
}
},
sources: [
{
type: "application/x-mpegurl",
src: "http://****/videos/2017/8/a9b68f36-c229-47c9-850d-0af298692693/348b790b-0cc1-4817-b846-acef88f1067b-master.m3u8"
}
]
}
});
what is want to be able to do is change http for ts files to http;
as you can see in the code above i can change it through xhrsetup.
every thing is good until i want to access xhrsetup in ios , iphones. because iphone use native hls , it does not go through my xhrsetup code in ios, i want to be able to do this in ios too.
does any one have any solution ?
That's simply not possible.
Safari on macOS provides the MediaSource Extension (MSE) which players like hls.js or Bitmovin can use to play HLS using Javascript instead of the native HLS playback of Safari.
Safari on iOS does not provide the MSE. As a consequence, ever HLS player has to use Safari's native HLS playback, which simply doesn't provide ways to interfere with the requests.
You can not do it .
This option is not available.
So i'm trying to play HLS streams on HTML5 without using Flash. We've tried many video players but they all relay on a flash player. My question, is it possible to play HLS streams (any) on HTML5 without using Flash?
(I know of the https://github.com/RReverser/mpegts but it doesn't work on mobile and is pretty laggy.)
m3u8 file is for live streaming. so please play your url in AVPlayer
https://developer.apple.com/streaming/
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 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.
I've successfully streamed normal YouTube videos on iOS using the iOS YouTube helper, but live stream does not seem to work.
I am not sure whether live streaming is even supported, but I could not find it in their docs.
Any idea how to make it work on iOS (without breaching ToS)?
The playback of YouTube Live Events is supported by the YTPlayerView iOS helper classes. The player will treat the Live Event video just like a regular YouTube video (as the iFrame player should), and your video should play back no problem with the "Live Broadcast" message replacing the scrubber of the player like so:
The only difference I have noticed is that the video will return an "auto" quality value. I have submitted a patch to handle this case which has been merged in to the official repo here.