blogger+video.js how can i add quality levels like 1080p, 720p, 480p

问题

I add video.js in my https://www.blogger.com website but how can I add quality levels like 1080p, 720p, 480p

Codes I added

In the head

<link href="http://vjs.zencdn.net/5.16.0/video-js.css" rel="stylesheet">

<!-- If you'd like to support IE8 -->
<script src="http://vjs.zencdn.net/ie8/1.1.2/videojs-ie8.min.js"></script>

In the body

<script src="http://vjs.zencdn.net/5.16.0/video.js"></script>

In the post

<video id="my-video" class="video-js" controls preload="auto" width="640" height="480" poster="MY_VIDEO_POSTER.jpg" data-setup="{}">
    <source src="http://drive.google.com/uc?export=download&id=0B04gyvra-UorR0t5RGdmT3pPZ0k" type='video/mp4'>
    <p class="vjs-no-js">To view this video please enable JavaScript, and consider upgrading to a web browser that
        <a href="http://videojs.com/html5-video-support/" target="_blank">supports HTML5 video</a>
    </p>
</video>

回答1:

You will have to utilize a plugin called Video.js Resolution Switcher and change the content in the post as shown in this example

<video id="video_1" class="video-js vjs-default-skin" controls data-setup='{}' >
  <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>

Working example can be found at https://kmoskwiak.github.io/videojs-resolution-switcher/

来源：https://stackoverflow.com/questions/42177445/bloggervideo-js-how-can-i-add-quality-levels-like-1080p-720p-480p

标签

blogger

video.js