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


使用开源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” data-setup=”{}”>
                    <source src=”http://vjs.zencdn.net/v/oceans.mp4″ type=”video/mp4″>
                </video>
            </div>
        </div>
    </body>
</html>
核心是设置视频比例:vjs-16-9 或者 vjs-4-3
视频居中class:vjs-big-play-centered

未经允许不得转载:seo教程博客网 » 织梦添加视频播放器HTML代码-视频播放器高度自适应解决方法

评论 0

评论前必须登录!

登陆 注册