javascript - 使用 Bootstrap 时创建视频标题

标签 javascript jquery html css twitter-bootstrap

我正在使用 bootstrap 构建网页
我正在使用的模板:http://startbootstrap.com/template-overviews/agency/
我的问题是我想将带有大图片的标题更改为视频
(此处示例:http://riskeverything.us/)
首先我认为我只需要抛出类似 <video></<video> tag 的东西进入<div></div> block ,以及 cssjs Bootstrap 将完成剩下的工作,但它失败了!
部分代码已修改: ```

<header>
<div class="container">
    <div class="intro-video">
        <video id="video" preload autoplay loop="loop" muted="muted" volume="0"> 
            <source src="./one.mp4" type="video/mp4"> 
            Video not supported
        </video>
    </div>
    <div class="intro-text">
        <div class="intro-lead-in">Welcome To Our Studio!</div>
        <div class="intro-heading">It's Nice To Meet You</div>
        <a href="#services" class="page-scroll btn btn-xl">Tell Me More</a>
    </div>
</div>

``` 有人能告诉我应该做什么进一步的工作吗,
谢谢!

最佳答案

你是对的 - 简单 <video></video>带有一些 CSS 的元素应该可以工作:http://take.ms/RWHMi

但更重要的是您需要特定格式的视频http://take.ms/AuK1p

这里你有工作示例 http://jsfiddle.net/h8rrhoua/

您也可以使用代码停止播放电影:

window.addEventListener('scroll', function(){ document.querySelector("#video").pause(); });

恕我直言,Bootstrap 对于这项工作是不必要的

关于javascript - 使用 Bootstrap 时创建视频标题,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/27617563/

相关文章:

javascript - Jquery 事件 - 如何选择不包括某些内部区域的整个 DIV

javascript - Facebook cordova 登录错误 : 'Failed to instantiate module facebookApp due to..'

javascript - 在 Javascript 中分配原型(prototype)链会引发 TypeError

在函数体内使用ajax时,Javascript函数未定义错误

jQuery UI 如何在父级的父级上设置可拖动包含选项

javascript - 水平时间线固定距离并以移动设备为中心

javascript - 如何对 document.getElementsByClassName 中的类的特定选择器运行函数

jquery - 创建垂直多级菜单

javascript - 是否有用于对 JavaScript 和 HTML 进行单元测试的框架

javascript - 我可以在 React + Redux 中使用 Props 设置初始状态吗?