Video JS Resolutions: set default resolution

phptuts December 6, 2015

If you use the videojs plugin: Video JS Resolutions at http://vidcaster.github.io/video-js-resolutions/

Here the example code
in <head> tag:

<link href="http://vidcaster.github.io/video-js-resolutions/video-js/video-js.min.css" rel="stylesheet" type="text/css" />
<link href="http://vidcaster.github.io/video-js-resolutions/video-js-resolutions/video-js-resolutions.css" rel="stylesheet" type="text/css" />

<script type="text/javascript" src="http://vidcaster.github.io/video-js-resolutions/video-js/video.dev.js"></script>
<script type="text/javascript" src="http://vidcaster.github.io/video-js-resolutions/video-js-resolutions/video-js-resolutions.js"></script>

in <body> tag

<video id="really-cool-video" class="video-js vjs-default-skin" controls
  width="100%" height="480" 
 data-setup='{"techOrder": ["html5"]}' poster="https://i1.ytimg.com/vi/1-9680HCIgw/mqdefault.jpg"> 
<source src="https://redirector.googlevideo.com/videoplayback?ratebypass=yes&upn=vUwaT3c8vKY&ip=xxx.xxx.xxx.xxx&mm=31&pl=21&mn=sn-8pxuuxa-i5ok&id=o-AMgru3LJ4-AAnTTEEdtpI242G3WLTUNxX4ABsMywD-yp&dur=1169.983&requiressl=yes&source=youtube&signature=B03AC73726A2C41773D59629E1D0D90B52003F91.4E8E42FD25BC60FBA74F9D491F3A812D22634E60&mt=1449377024&mv=m&ms=au&fexp=9407190%2C9408710%2C9414802%2C9416126%2C9417656%2C9417683%2C9419452%2C9419723%2C9420452%2C9422540%2C9422596%2C9422618%2C9423171%2C9423662%2C9424915%2C9425282%2C9425362&lmt=1433657519255621&sver=3&initcwndbps=1463750&sparams=dur%2Cid%2Cinitcwndbps%2Cip%2Cipbits%2Citag%2Clmt%2Cmime%2Cmm%2Cmn%2Cms%2Cmv%2Cpcm2cms%2Cpl%2Cratebypass%2Crequiressl%2Csource%2Cupn%2Cexpire&ipbits=0&expire=1449398688&mime=video%2Fmp4&key=yt6&itag=22&pcm2cms=yes" type='video/mp4' data-res="720p">
<source src="https://redirector.googlevideo.com/videoplayback?ratebypass=yes&upn=vUwaT3c8vKY&ip=xxx.xxx.xxx.xxx&mm=31&pl=21&mn=sn-8pxuuxa-i5ok&id=o-AMgru3LJ4-AAnTTEEdtpI242G3WLTUNxX4ABsMywD-yp&dur=1169.983&requiressl=yes&source=youtube&signature=E133E001180C32CF91EF8821915B5C6AA919C1B2.7F07BF359CD62662E2B0AB239092602C4A43D195&mt=1449377024&mv=m&ms=au&fexp=9407190%2C9408710%2C9414802%2C9416126%2C9417656%2C9417683%2C9419452%2C9419723%2C9420452%2C9422540%2C9422596%2C9422618%2C9423171%2C9423662%2C9424915%2C9425282%2C9425362&lmt=1433657407244964&sver=3&initcwndbps=1463750&sparams=dur%2Cid%2Cinitcwndbps%2Cip%2Cipbits%2Citag%2Clmt%2Cmime%2Cmm%2Cmn%2Cms%2Cmv%2Cpcm2cms%2Cpl%2Cratebypass%2Crequiressl%2Csource%2Cupn%2Cexpire&ipbits=0&expire=1449398688&mime=video%2Fmp4&key=yt6&itag=18&pcm2cms=yes" type='video/mp4' data-res="360p">
      
</video>   
     
    <script type="text/javascript">
      vjs('really-cool-video', {
         
        plugins: {
          resolutions: true
        }
      });
    </script>

videojs resolutions

How to set default resolution eg: 360

We use the attribute data-default of <source> tag

<source src="https://redirector.googlevideo.com/videoplayback?mime=video%2Fmp4&requiressl=yes&ratebypass=yes&ipbits=0&pl=21&expire=1449399027&fexp=9407190%2C9408710%2C9414802%2C9416126%2C9417656%2C9417683%2C9419452%2C9419723%2C9420452%2C9422540%2C9422596%2C9422618%2C9423171%2C9423662%2C9424915%2C9425282%2C9425362&itag=18&upn=Z_yqwfVwakU&pcm2cms=yes&sparams=dur%2Cid%2Cinitcwndbps%2Cip%2Cipbits%2Citag%2Clmt%2Cmime%2Cmm%2Cmn%2Cms%2Cmv%2Cpcm2cms%2Cpl%2Cratebypass%2Crequiressl%2Csource%2Cupn%2Cexpire&key=yt6&ip=xxx.xxx.xxx.xxx&mn=sn-8pxuuxa-i5ok&mm=31&signature=DB6A461FCDA6B23F55356FE519D684142CDCAF0E.AD22C87E19EDFCA63CA17139AC1F196F478BF8EA&mv=m&mt=1449377377&ms=au&id=o-AEdZHtsYbXaoNQ0V64e5vk8BD98ghKop_9D8hVkszzLv&lmt=1433657407244964&source=youtube&sver=3&dur=1169.983&initcwndbps=1485000" type='video/mp4' data-res="360p" data-default="true">

phptuts

Related Posts

Leave a Reply