search

mediaelement / mediaelement-plugins

Plugins for the main mediaelement project
405 stars 137 forks source link

Quality plugin not working #172

Closed throne1986 closed 4 years ago

throne1986 commented 4 years ago

Hi every one am new to media element , I would like to use quality plugin but unfortunately its not showing here is my code

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8" />
        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
        <title>Demo HLS</title>
        <script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
        <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/5.0.0/normalize.min.css" />
        <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/mediaelement/4.2.6/mediaelementplayer.css" />
        <link rel="stylesheet" href="https://github.com/mediaelement/mediaelement-plugins/blob/master/dist/quality/quality.css" />
        <link rel="icon" href="https://www.interactive-video.videomill.pl/images/fav_videomill_1.png" />
    </head>
    <body>
        <div class="media-wrapper">
            <video id="player1" width="750" height="421" controls preload="none">
                <source type="application/x-mpegURL" src="//r.dcs.redcdn.pl/hls/o2/Allegro/vod/1af1b7ee-f87b-4e55-b50f-ac9d7f3e2647/playlist.smil/playlist.m3u8" data-quality="HD" />
                <source type="video/mp4" src="https://commondatastorage.googleapis.com/gtv-videos-bucket/CastVideos/mp4/BigBuckBunny.mp4" data-quality="SD" />
                <source type="video/mp4" src="http://clips.vorwaerts-gmbh.de/big_buck_bunny.mp4" data-quality="LD" />
            </video>
        </div>

        <script src="https://cdnjs.cloudflare.com/ajax/libs/mediaelement/4.2.6/mediaelement-and-player.min.js"></script>
        <script src="https://github.com/mediaelement/mediaelement-plugins/blob/master/dist/quality/quality.js"></script>

        <script>
            var mediaElements = document.querySelectorAll("video, audio");

            for (var i = 0, total = mediaElements.length; i < total; i++) {
                new MediaElementPlayer(mediaElements[i], {
                    features: ["playpause", "current", "progress", "duration", "volume", "quality", "fullscreen"],
                });
            }
        </script>
    </body>
</html>

What is wrong with my code? u can copy the above code and run it , there is no quality button at all

jaapmarcus commented 4 years ago

Prepared a Codepen for you see maybe it will help you :) https://codepen.io/jaapmarcus/pen/GRpxZWj Best regards

throne1986 commented 4 years ago

@jaapmarcus thanks a lot, is it possible to play video based on internet speed? let assume my internet is very slow when I open the media player automatically it should play low-quality video eg sd ?

jaapmarcus commented 4 years ago

The only way to do that is with downloading a file and testing it. Not the best option imo..

HLS and Dash protocol / steaming has build in support for it.

If you check https://r.dcs.redcdn.pl/hls/o2/Allegro/vod/1af1b7ee-f87b-4e55-b50f-ac9d7f3e2647/playlist.smil/playlist.m3u8 with out any player you will see it scaling depending on network performance. You will need to supply multiple stream qualities in 1 file ima...

throne1986 commented 4 years ago

Yes Ur right everything works perfectly now, my last question is about autoplay, I added autoplay true on media element player options but it's not working, do I always need to do like this below?

<video id="videoplayer" muted muted webkit-playsinline playsinline autoplay>
   </video>

or is there any other method?

jaapmarcus commented 4 years ago 
<video id="videoplayer" muted playsinline autoplay>
   </video>

Should be fine

But yes it needs to be always added for iOS other mobile devices. (And some other browsers)

throne1986 commented 4 years ago

okay thanks, bro u can close the issue, by the way, this amazing player, for me the best open source available in the market, God Bless all yah for the amazing job

mircobabini commented 4 years ago

Hey, adding some more questions here:

1) About HLS, what do you think about preparing a demo with mediaelement + https://github.com/aminyazdanpanah/PHP-FFmpeg-video-streaming#hls ? I think that a lot of people could be in my same situation (I just have 1 high quality mp4 and want to generate medium and low quality resources and also add HLS in order to have auto-quality selection, but don't know how to create the m3u8 files you linked above @jaapmarcus).

2) About redundancy, is it possible to have the same resources provided by multiple servers, in order to have an automatic fallback in case one of the resources goes in 404/40* error for any reason?

Thank you.

jaapmarcus commented 4 years ago
  1. About HLS, what do you think about preparing a demo with mediaelement + https://github.com/aminyazdanpanah/PHP-FFmpeg-video-streaming#hls ? I think that a lot of people could be in my same situation (I just have 1 high quality mp4 and want to generate medium and low quality resources and also add HLS in order to have auto-quality selection, but don't know how to create the m3u8 files you linked above @jaapmarcus).

It is possible with FFmpeg see https://docs.peer5.com/guides/production-ready-hls-vod/

In the past I made a Wordpress Plugin based on the transcoding (mp4 to a lower quality mp4) with PHP-ffmpeg so allot is possible. I suggest at least do the encoding one time and save it to the disk... On the fly encoding is only possible with low traffic or you need a way bigger server to enanble it.

Also paid options are 3rd parties like https://coconut.co, or AWS and stuff like that.

You are free to give it a try. I am happy to give some small hits and tips to solve an issue but writing al lot of code and test everything propperly with multiple devices isn't a part that is not a part of my job description. Especially it won't help me with my current use of MediaElements.

  1. About redundancy, is it possible to have the same resources provided by multiple servers, in order to have an automatic fallback in case one of the resources goes in 404/40* error for any reason?

This is possible with a Propper Loadbalancer and multiple servers. How ever this is way beyond the scope of Media Elements...

mircobabini commented 4 years ago

Sure, of course it's beyond the scope, I'll do my own researches. Just one more question: in order to use BLOB urls instead of standard urls the best idea is to first enable HLS in order to activate segmentation instead of having to download the full mp4 video synchronously, right?

Thank you very much.

jaapmarcus commented 4 years ago

Go ahead and try. I don't using blobs work due to the nature of HLS and the segmented part.

vendbits commented 3 years ago

Prepared a Codepen for you see maybe it will help you :) https://codepen.io/jaapmarcus/pen/GRpxZWj Best regards

Hello,

I'm having an issue with the quality plugin also as described here: https://github.com/mediaelement/mediaelement-plugins/issues/196

I looked at the Codepen mentioned above and I noticed it has the same behavior. The video source/quality is not changing as I can see in Inspect Element > Network

Only BigBuckBunny.mp4, and never big_buck_bunny.mp4 is being played even after switching source/quality

Thank you.

rotator commented 2 years ago

Hi!

I had the same bug with both versions: mediaelement-plugins 2.5.0 + mediaelement 4.2.17 and mediaelement-plugins 2.6.0 + mediaelement 5.0.0.

The problem was in the newQuality value after radio input change - lines 224-225 in quality.js. Fixed it for the latest releases mediaelement-plugins 2.6.0 + mediaelement 5.0.0 and created a patch (please, remove .md extension) mediaelement-plugins-quality-switcher.patch.md.

jaapmarcus commented 2 years ago

Please submit a pull request via https://github.com/mediaelement/mediaelement-plugins/pulls

rotator commented 2 years ago

Updated fix for the mediaelement-plugins 2.6.2 release. Tested with mediaelement 5.0.4 version. Created PR https://github.com/mediaelement/mediaelement-plugins/pull/215 Please, review. Updated patch for mediaelement-plugins 2.6.2 release: mediaelement-plugins-quality-switcher-2.6.2.patch.md Please remove md extension.