Video.js样式不会覆盖默认视频样式

时间:2014-09-17 15:20:02

标签: javascript jquery css html5 video

我正在这里的网站上工作,我发现了项目下一部分的video.js插件。我完全按照video.js网站的说法做了一切,以便在页面上正确设置它,甚至在页面上移动外部文件链接,这并没有影响任何事情。我只是希望能够设置它的样式,使其看起来与它所在的网站类似。示例代码如下。我也在使用bootstrap 3.0我不知道这是不是一个问题。

<!DOCTYPE html>
<html>
    <head>
        <link rel='stylesheet' type='text/css' href='<?=$up_level?>assets/css/bootstrap.css'>
        <link rel='stylesheet' type='text/css' href='<?=$up_level?>assets/video-js/video-js.css'>
    </head>
    <body>
    <div class='container-fluid'>
        <div class='row'>
            <div class='col-lg-4 col-lg-offset-2'>
            </div>
            <div class='col-lg-4'>
                <video id='intro-video' class='video-js vjs-default-skin' preload='auto' width='640' height='264' poster='' data-setup='{controls:true}' >
                <source src='http://techslides.com/demos/sample-videos/small.mp4' type='video/mp4' />
                </video>
            </div>
        </div>
    </div>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
    <script type='text/javascript' src='<?=$up_level?>assets/js/bootstrap.min.js'></script>
    <script type='text/javascript' src='<?=$up_level?>assets/video-js/video.js'></script>
    </body>
</html>

其他参考文献

<?=$up_level?>

只是一个目录级计算器。该功能没有问题。此外,我有双重和三重检查video-js文件夹在其正确的目录位置,并正在加载。所以再次回顾一下,使用video.js扩展名,它不会让我设置任何样式,或者覆盖正常的html5样式。我该如何解决这个问题?

1 个答案:

答案 0 :(得分:0)

我实际上已经找到了问题,它与我在

下发送JSON数据的方式有关
data-setup: '{controls:true}'

应该格式化为

data-setup: '{"controls":true}'

然后剩下的就在css文件中