راکت
راکت
1masoud
1masoud
7 سال پیش توسط 1masoud مطرح شد
حل
5 پاسخ

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

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

متفرقه
ثبت پرسش جدید
1masoud
1masoud
تخصص :php,laravel
@masoudproton7 سال پیشمطرح شد
1

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

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

ارسال پاسخ
dr.m
dr.m
@drmarmolak7 سال پیشمطرح شد
1

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

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

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

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
1masoud
تخصص :php,laravel
@masoudproton7 سال پیشمطرح شد
1

@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>
ارسال پاسخ
dr.m
dr.m
@drmarmolak7 سال پیشمطرح شد
1

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

<!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>

نتیجه کد بالا

آدرس پلاگین گیتهاب Video.js Resolution Switcher Build Status
موفق باشید

ارسال پاسخ
1masoud
1masoud
تخصص :php,laravel
@masoudproton7 سال پیشمطرح شد
1

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

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

ارسال پاسخ
1masoud
1masoud
تخصص :php,laravel
@masoudproton7 سال پیشمطرح شد
1

@drmarmolak
الان می خواهم quality داشته باشه هم اول ویدیو تبلیغ نمایش بده

ارسال پاسخ

برای ارسال پاسخ لازم است وارد شده یا ثبت‌نام کنید

ورود یا ثبت‌نام