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

- 2 هفته پیش
توسط 1masoud آپدیت شد
1masoud ( 10435 تجربه )
2 هفته پیش

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

dr.m ( 345 تجربه )
2 هفته پیش

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

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

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 ( 10435 تجربه )
2 هفته پیش

@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 ( 345 تجربه )
2 هفته پیش

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

<!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 ( 10435 تجربه )
2 هفته پیش

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

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

برای ارسال پاسخ باید وارد سایت شوید