video-js HTML5网页播放器如何设置到网页中间

Posted 2023-05-07

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了video-js HTML5网页播放器如何设置到网页中间相关的知识，希望对你有一定的参考价值。

video-js html5网页播放器如何设置到网页中间？
以下是首页显示代码，求大神帮忙改改;

<title>Video.js | HTML5 Video Player CNZ.CO</title>


<link href="video-js.css" rel="stylesheet" type="text/css">

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


<script>
_V_.options.flash.swf = "video-js.swf";
</script>

<video id="example_video_1" class="video-js vjs-default-skin" controls="" preload="none" width="640" height="264" poster="http://video-js.zencoder.com/oceans-clip.png" data-setup="">
<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">
<track kind="captions" src="captions.vtt" srclang="en" label="English"></track>
</video>

参考技术A 把<video>元素放入到一个<div>标签中，如：
<div>
<video>
/*这里放入你的代码*/
</video>
</div>
然后设置这个<div>的样式使这个<div>居中。本回答被提问者采纳

video.js

1.github地址

2.常用API:

class :

　　video-js: video-js应用视频所需的风格。js功能,比如全屏和字幕。

　　vjs-default-skin: vjs-default-skin默认皮肤适用于HTML控件,并且可以删除或覆盖创建自己的控制设计

data-setup 设置常用属性:

　　autoplay :是否自动播放
　　controls: 设置是否可以人为控制播放
　　preload：{ 设置预加载
　　auto：立即加载(浏览器允许的情况下)
　　metadata:只加载视频的基本信息
　　none:不加载，直到用户点击播放的时候
　　}
　　poster：设置未播放时候的快照
　　loop：控制是否循环播放
　　width
　　height

JS形式:

videojs("example_video_1", {}, function(){
　　// Player (this) is initialized and ready.
});

videojs中设置data-setup的两种方式:

　　1.html:

　　　　<video data-setup=‘{ "controls": true, "autoplay": false, "preload": "auto" }‘...>
　　2.js:

　　　　videojs("example_video_1", { "controls": true, "autoplay": false, "preload": "auto" });

track:

　　kind:定义字幕内容类型，只能是这五种之一: subtitles, captions, descriptions, chapters, metadata.
　　src:字幕文件的URL地址
　　srclang:字幕文件的语言类型，标识信息的作用，播放器不使用这个属性。
　　label:字幕标签，每个字幕元素必需设置一个唯一不重复的标签，切换字幕时显示的名称。
　　default:指定是否是默认字幕。如果每个都不指定，将不会自动显示字幕

例子:

<!DOCTYPE html>
<html>
<head>
    <title>video.js</title>

    <link href="http://vjs.zencdn.net/5.8.8/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>
</head>
<body>

  <video id="my-video" class="video-js vjs-default-skin vjs-big-play-centered" width="640" height="264"
  poster="D:\CloudMusic\MV\jay.zhou.jpg" data-setup=‘{ "controls": true, "autoplay": true, "preload": "auto" }‘>
    <!--MP4的数据源-->
    <source src="D:\CloudMusic\MV\jay.zhou.mp4" type=‘video/mp4‘>
    
    <track kind="subtitles" label="Chinese subtitles" src="D:\CloudMusic\MV\st.vtt"
   srclang="zh" label="Chinese">
    
  </video>

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

</body>
</html>


截图:

技术分享

以上是关于video-js HTML5网页播放器如何设置到网页中间的主要内容，如果未能解决你的问题，请参考以下文章

html5 怎么点一个按钮,播放一个相应的视频