blogger + video.js如何添加1080p,720p,480p等质量等级

时间:2017-02-11 15:13:10

标签: blogger video.js

我在https://www.blogger.com网站上添加了video.js但是如何添加1080p,720p,480p等质量等级

我添加的代码

头脑中

<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>

在体内

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

在帖子中

<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 个答案:

答案 0 :(得分:1)

您必须使用名为Video.js Resolution Switcher的插件并更改帖子中的内容,如本例所示

<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>

可以在https://kmoskwiak.github.io/videojs-resolution-switcher/

找到工作示例