How to embed in HD?

[rawaludin]

Hi, first thanks for creating this awesome library.. :)

This is not an issue, just a question. I have successfully use videojs-youtube to embed youtube video on my page http://malescast.com/Eksis-dengan-HexoJS/instalasi-hexojs

As you can see there, the video is not HD. In Youtube https://www.youtube.com/watch?v=bujxtMQouZ4 I could watch the video in HD.

Currently my setup is like this:

<video
      id="malescast-video"
      poster="/img/poster/hexo-part-01.jpg"
      class="video-js vjs-default-skin vjs-big-play-centered"
      controls preload="auto" width="640" height="360"
      data-setup='{ "techOrder": ["youtube"], "aspectRatio":"16:10", "sources": [{ "type": "video/youtube", "src": "https://www.youtube.com/watch?v=bujxtMQouZ4"}], "Youtube": { "ytControls": 2 }}'
       style="margin:auto;">
 </video>

You can see it on the page.

I even change this to this:

<video
      id="malescast-video"
      poster="/img/poster/hexo-part-01.jpg"
      class="video-js vjs-default-skin vjs-big-play-centered"
      controls preload="auto" width="1280" height="800"
      data-setup='{ "techOrder": ["youtube"], "aspectRatio":"16:10", "sources": [{ "type": "video/youtube", "src": "https://www.youtube.com/watch?v=bujxtMQouZ4"}], "Youtube": { "ytControls": 2 }}'
       style="margin:auto;">
 </video>

But still doesn't work. How to fix this? Thanks.

[rawaludin]

Or, is it possible to show quality selector?

[Spoowy]

There needs a plugin to be written for this. If you can live with a dirty fix for this, I can help you out and provide you with some lines of code you need to adjust.

onPlayerStateChange you can get available qualities for a video via this.ytPlayer.getAvailableQualityLevels();

Then build a menu with quality data attributes. onClick of a quality-select item in your menu, set the new playback quality via ytPl.setPlaybackQuality(quality);

[rawaludin]

Hey, I'm new in this. Before trying it out myself, do you have sample code snippet for the hack? Thanks..

On Tue, Nov 10, 2015, 9:58 PM Spoowy notifications@github.com wrote:

There needs a plugin to be written for this. If you can live with a dirty fix for this, I can help you out and provide you with some lines of code you need to adjust.

onPlayerStateChange you can get available qualities for a video via this.ytPlayer.getAvailableQualityLevels();

Then build a menu with quality data attributes. onClick of a quality-select item in your menu, set the new playback quality via ytPl.setPlaybackQuality(quality);

— Reply to this email directly or view it on GitHub https://github.com/eXon/videojs-youtube/issues/326#issuecomment-155442215 .

[eXon]

There is no plan to support the quality selector inside the tech. It should be a plugin.

[cemerson]

@rahmatawaludin I'm not sure if you still need help or if this is much of any but to deal with this myself I just setup pointer methods to the ytPlayer methods right after the videojs ready event - something like this: player['setPlaybackQuality'] = function(q){ if(activeVideoObject.type=="youtube"){ player.tech_.ytPlayer.setPlaybackQuality(q); console.log('setPlaybackQuality() [' + q + ']'); } }
player['getAvailableQualityLevels'] = function(){ // returns something like ["large", "medium", "small", "tiny", "auto"] var ql = player.tech_.ytPlayer.getAvailableQualityLevels(); console.log('getAvailableQualityLevels()...[' + ql+ ']'); return ql; }

I'm still working out the kinks but in general I think this has me 99% there.