جشنواره عیدانه راکت | عضویت ویژه راکت برای آخرین بار | افزایش قیمت‌ها از سال جدید | و ...

مشاهده اطلاعات بیشتر...
ثانیه
دقیقه
ساعت
روز
1masoud
5 سال پیش توسط 1masoud مطرح شد
5 پاسخ

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

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


ثبت پرسش جدید
1masoud
تخصص : php,laravel
@masoudproton 5 سال پیش آپدیت شد
1

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

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


dr.m
@drmarmolak 5 سال پیش آپدیت شد
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
تخصص : php,laravel
@masoudproton 5 سال پیش آپدیت شد
1

@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 5 سال پیش آپدیت شد
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
تخصص : php,laravel
@masoudproton 5 سال پیش آپدیت شد
1

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

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


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

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


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

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