• 王泽鹏博客专注陕西西安seo优化及网站优化快速排名

织梦添加视频播放器HTML代码-视频播放器高度自适应解决方法

王泽鹏博客 1个月前 (06-14) 61次浏览 0个评论
使用开源 video.js
项目地址:https://github.com/videojs/video.js
代码:
<!DOCTYPE html>
<html>
    <head>
        <meta charset=”UTF-8″>
        <title></title>
        <meta name=”viewport” content=”width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no”>
        <meta http-equiv=”X-UA-Compatible” content=”IE=Edge,chrome=1″>
        <link href=”//vjs.zencdn.net/5.4.6/video-js.min.css” rel=”stylesheet”>
        <script src=”//vjs.zencdn.net/5.4.6/video.min.js”></script>
        <style>
            body {
                padding: 0;
                margin: 0;
            }
            div.videocontent {
                width:100%;
            }
            div.wrapper {
                max-width:750px;
                margin: 0 auto;
            }
        </style>
    </head>
    <body>
        <div class=”wrapper”>
            <div class=”videocontent”>
                <video id=”example_video_1″ class=”video-js vjs-default-skin vjs-big-play-centered vjs-16-9″ controls preload=”none” poster=”http://vjs.zencdn.net/v/oceans.png&#8221; data-setup=”{}”>
                    <source src=”http://vjs.zencdn.net/v/oceans.mp4&#8243; type=”video/mp4″>
                </video>
            </div>
        </div>
    </body>
</html>
核心是设置视频比例:vjs-16-9 或者 vjs-4-3
视频居中 class:vjs-big-play-centered

王泽鹏博客版权所有丨如未注明 , 均为原创丨 转载请注明织梦添加视频播放器 HTML 代码-视频播放器高度自适应解决方法
喜欢 (1)
[zhifu@wangzepeng.cn]
分享 (0)

您必须 登录 才能发表评论!