حل شده

اضافه کردن quality به videojs

@Alimotreb
@ali.bayat
چطوری میتونم quality را به پلیرvideojs اضافه کنم
اینم عکس
https://mega.nz/#!tVACkQpS
رمز:!GbhP-M3pZp3ME5k-eebftUT6mGTPBzmIL5ZpaufTY1Y
رمز رو انگلیسی تایپ کنید

متفرقه

1masoud

@masoudproton

ثبت پرسش جدید

پاسخ‌ها

1masoud

@masoudproton7 سال پیش مطرح شد

تخصص: php,laravel

بهترین پاسخ

@drmarmolak
کد بالا درسته اما من وقتی می خواهم از پسوند های hls که مثل مثال پایین استفاده کنم نمیشه کلیپ رو نمایش نمیده
<source src="out.m3u8" type="application/x-mpegURL" label='SD' res='480'>

راستی اگه راه تماسی یا ایمیلی یا تلگرامی داری بگو بیشتر در ارتباط باشیم ممنون

ارسال پاسخ

dr.m

@drmarmolak7 سال پیش مطرح شد

سلام دوست من
عکس مشکل شما رو دیدم

اگه کد تنظیماتی که براش ست کردی رو میزاشتی راحت تر میشد راهنمایی کرد
ولی اینجا مثال هایی که لازم داری وجود داره:
مثال از سایت اصلی
آدرس پلاگین و داکیومنت از گیتهاب

یکی از نمونه کد ها رو برای شما میزارم:

videojs('video', {
    controls: true,
    plugins: {
      videoJsResolutionSwitcher: {
        default: 'low', // Default resolution [{Number}, 'low', 'high'],
        dynamicLabel: true
      }
    }
  }, function(){
    var player = this;
    window.player = player
    player.updateSrc([
      {
        src: 'https://vjs.zencdn.net/v/oceans.mp4?SD',
        type: 'video/mp4',
        label: 'SD',
        res: 360
      },
      {
        src: 'https://vjs.zencdn.net/v/oceans.mp4?HD',
        type: 'video/mp4',
        label: 'HD',
        res: 720
      }
    ])
    player.on('resolutionchange', function(){
      console.info('Source changed to %s', player.src())
    })
  })

ارسال پاسخ

1masoud

@masoudproton7 سال پیش مطرح شد

تخصص: php,laravel

@drmarmolak

برای hls چی؟  
من الان می خواهم برای hls استفاده کنم اما quality نمایش نمیده
<html>
<head>
        <link href="https://unpkg.com/video.js/dist/video-js.css" rel="stylesheet">
        <link href="https://roocket.ir/videojs-resolution-switcher.css" rel="stylesheet">
        <link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.7.2/css/all.min.css" rel="stylesheet">
        <script src="https://unpkg.com/video.js/dist/video.js"></script>
        <script src="https://unpkg.com/videojs-contrib-hls/dist/videojs-contrib-hls.js"></script>
        <script src="videojs-resolution-switcher.js"></script>
        <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
</head>
<body>
<video id="example-video" class="video-js vjs-default-skin"  width=960 height=540 controls data-setup='{}' >
    <source src="out.m3u8" type="application/x-mpegURL" label='SD' res='480'>
            <source src="out1.m3u8" type="application/x-mpegURL" label='HD' res='720'>
       <!--  <source src="1.mp4" type='video/mp4' label='SD' res='480'>
        <source src="2.mp4" type='video/mp4' label='HD' res='1080'> -->
<!--  <source src="https://vjs.zencdn.net/v/oceans.mp4?sd" type='video/mp4' label='SD' res='480' />-->
<!--  <source src="https://vjs.zencdn.net/v/oceans.mp4?hd" type='video/mp4' label='HD' res='1080'/>-->
<!--  <source src="https://vjs.zencdn.net/v/oceans.mp4?phone" type='video/mp4' label='phone' res='144'/>-->
<!--  <source src="https://vjs.zencdn.net/v/oceans.mp4?4k" type='video/mp4' label='4k' res='2160'/>-->
</video>
<script src="videojs-resolution-switcher.js"></script>
<script src="video.js"></script>
<script src="videojs.hls.min.js"></script>
<script>
    $(document).ready(function () {
        $('.vjs-resolution-button .vjs-control-text').html('<i class="fa fa-cog" aria-hidden="true"></i>');
        $('.vjs-resolution-button .vjs-control-text').css({  'position': 'relative',
        'height': '20px',
        'width': '20px',
        'font-size': '17px'});
    });
    videojs('example-video').videoJsResolutionSwitcher()
    var player = videojs('example-video');
    player.play();
</script>
</body>
</html>

ارسال پاسخ

شاید پاسخ شما همین‌جا باشد

@drmarmolak7 سال پیش مطرح شد

بفرمایید این هم کد که تست کردم

<!doctype html>
<html>

<head>

  <link href="https://cdnjs.cloudflare.com/ajax/libs/video.js/5.8.0/video-js.css" rel="stylesheet">
  <link href="https://cdnjs.cloudflare.com/ajax/libs/videojs-resolution-switcher/0.4.2/videojs-resolution-switcher.css"
    rel="stylesheet">

</head>

<body>

  <video id="video_1" class="video-js vjs-default-skin" width="1000" controls data-setup='{}' muted>
    <source src="https://vjs.zencdn.net/v/oceans.mp4?480" type='video/mp4' label='SD' res='480' />
    <source src="https://vjs.zencdn.net/v/oceans.mp4?1080" type='video/mp4' label='HD' res='1080' />
    <source src="https://vjs.zencdn.net/v/oceans.mp4?144" type='video/mp4' label='phone' res='144' />
    <source src="https://vjs.zencdn.net/v/oceans.mp4?2160" type='video/mp4' label='4k' res='2160' />
  </video>

  <script src="https://cdnjs.cloudflare.com/ajax/libs/video.js/5.8.0/video.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/videojs-resolution-switcher/0.4.2/videojs-resolution-switcher.js"></script>

  <script>

    videojs('video_1').videoJsResolutionSwitcher()

  </script>

</body>

</html>

نتیجه کد بالا