视频自适应宽高完整代码,Video.js播放器自适应宽高方法

以下是完整的代码,一共三个部分,都用红色标注了,分别放在头部、视频内容部分和尾部:

<!DOCTYPE html>
<html lang=”zh-CN”>
<head>
<meta charset=”utf-8″>
<meta http-equiv=”X-UA-Compatible” content=”IE=edge”>
<meta name=”viewport” content=”width=device-width, initial-scale=1″>
<!– 上述3个meta标签*必须*放在最前面,任何其他内容都*必须*跟随其后! –>
<title>视频</title>

<link href=”https://cdn.bootcdn.net/ajax/libs/video.js/7.10.1/alt/video-js-cdn.min.css” rel=”stylesheet”>
<!– If you’d like to support IE8 (for Video.js versions prior to v7) –>
<!– <script src=”https://vjs.zencdn.net/ie8/1.1.2/videojs-ie8.min.js”></script> –>
<script type=”text/javascript”>
var player = videojs(‘#my-video’,{fluid: true},function(){
console.log(‘Good to go!’);
this.play(); // if you don’t trust autoplay for some reason
})
</script>
</head>
<body>

<video id=”my-video” class=”video-js vjs-big-play-centered vjs-fluid” controls preload=”auto” poster=”” data-setup=”{}”>
<source src=”cs1.mp4″ type=”video/mp4″>
<p class=”vjs-no-js”>您的浏览器不支持,请换一个浏览器!</p>
</video>

<script src=”https://cdn.bootcdn.net/ajax/libs/video.js/7.10.1/video.min.js”></script></body>
</html>

发表评论

您的电子邮箱地址不会被公开。 必填项已用 * 标注