Question

新手video.js在这里提问。

我设法让video.js播放器以两种不同的方式工作。

点击

<script src="video-js-5.4.4/video.js"></script>

在我的页面的头部，并使用视频标记：

<video id="example_video_1" class="video-js vjs-default-skin"
controls preload="auto" width="640" height="264"
poster="http://video-js.zencoder.com/oceans-clip.png"
data-setup='{"example_option":true}'>
<source src="http://video-js.zencoder.com/oceans-clip.mp4" type='video/mp4' />
<source src="http://video-js.zencoder.com/oceans-clip.webm" type='video/webm' />
<source src="http://video-js.zencoder.com/oceans-clip.ogv" type='video/ogg' />
<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>

点击

<script src="video-js-5.4.4/video.js"></script>

在每个视频代码之后，而不是将其放在我的页面的头部：

<video id="example_video_1" class="video-js vjs-default-skin"
controls preload="auto" width="640" height="264"
poster="http://video-js.zencoder.com/oceans-clip.png"
data-setup='{"example_option":true}'>
<source src="http://video-js.zencoder.com/oceans-clip.mp4" type='video/mp4' />
<source src="http://video-js.zencoder.com/oceans-clip.webm" type='video/webm' />
<source src="http://video-js.zencoder.com/oceans-clip.ogv" type='video/ogg' />
 <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>
     <script src="video-js-5.4.4/video.js"></script>

有没有更好的方法？

我也在使用video.js分辨率切换器插件，我也可以同时使用它。

点击

<script src="video-js-5.4.4/video.js"></script>
<script src="videojs-resolution-switcher/lib/videojs-resolution-switcher.js"></script>

在我的页面的头部，并使用video.js视频标记加上分辨率切换器插件参考：

<video id="example_video_1" class="video-js vjs-default-skin"
controls preload="auto" width="640" height="264"
poster="http://video-js.zencoder.com/oceans-clip.png"
data-setup='{"example_option":true}'>
<source src="http://video-js.zencoder.com/oceans-clip.mp4" type='video/mp4' />
<source src="http://video-js.zencoder.com/oceans-clip.webm" type='video/webm' />
<source src="http://video-js.zencoder.com/oceans-clip.ogv" type='video/ogg' />
<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>
<script>videojs('example_video_1').videoJsResolutionSwitcher()</script>

点击

<script src="video-js-5.4.4/video.js"></script> 
<script src="videojs-resolution-switcher/lib/videojs-resolution-switcher.js"></script>
<script>videojs('example_video_1').videoJsResolutionSwitcher()</script>

在每个视频代码之后，而不是将脚本放在我的页面的头部。

<video id="example_video_1" class="video-js vjs-default-skin"
controls preload="auto" width="640" height="264"
poster="http://video-js.zencoder.com/oceans-clip.png"
data-setup='{"example_option":true}'>
<source src="http://video-js.zencoder.com/oceans-clip.mp4" type='video/mp4' />
<source src="http://video-js.zencoder.com/oceans-clip.webm" type='video/webm' />
<source src="http://video-js.zencoder.com/oceans-clip.ogv" type='video/ogg' />
<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>
<script src="video-js-5.4.4/video.js"></script>
<script src="videojs-resolution-switcher/lib/videojs-resolution-switcher.js"></script>
<script>videojs('example_video_1').videoJsResolutionSwitcher()</script>

在我将所有其他页面上的代码复制之前，我想知道什么是最好的。

另外，我注意到设置信息表示链接到“video.min.js”文件而不是“video.js”文件。再次，它有所作为吗？

感谢您提供任何专家帮助。

Jean

Answer 1

没关系，但是您应该包含一次脚本，而不是每个视频标记之后。但是，如果您还使用IE8垫片，则该脚本确实需要在头部。

video.min.js缩小，因此传输的数据较少。您可以在生产中使用它。当您想要调试代码时，video.js非常有用。 CSS文件也是如此。

在页眉或每个视频之后的Videos.js <script src =“video-js-5.4.4 / video.js”> </script>？

1 个答案: