1masoud

6 سال پیش توسط 1masoud مطرح شد

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

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

ثبت پرسش جدید

1masoud

تخصص : php,laravel

@masoudproton 6 سال پیش آپدیت شد

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

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

ارسال پاسخ

dr.m

@drmarmolak 6 سال پیش آپدیت شد

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

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

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

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

تخصص : php,laravel

@masoudproton 6 سال پیش آپدیت شد

@drmarmolak

برای hls چی؟  
من الان می خواهم برای hls استفاده کنم اما quality نمایش نمیده
<html>
<head>
        <link href="https://unpkg.com/video.js/dist/video-js.css" rel="stylesheet">
        <link href="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

@drmarmolak 6 سال پیش آپدیت شد

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

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

تخصص : php,laravel

@masoudproton 6 سال پیش آپدیت شد

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

ارسال پاسخ

1masoud

تخصص : php,laravel

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

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

ارسال پاسخ

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

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

دوره‌های آموزشی

مسیرهای یادگیری

پیشرفت من

دوره‌های رایگان

گواهی پایان دوره

محبوب‌ترین آموزش‌ها

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

گزینش سوالات

گفت و گو های مرتبط

دسته ‌بندی سوالات

تگ‌های محبوب

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