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 - 延迟 gif 动画 x 秒

html - 如何在 Html/MVC 中创建列?

javascript - 在 jQuery 中使用 clone() 更新 id 并将加号按钮更改为减号按钮

javascript - Angularjs 错误 : [$injector:modulerr] 'ngRoute'

javascript - 如何将 JS 单击事件附加到 AJAX 加载按钮?

html - 如何居中导航栏元素?

html - svg css动画更改位置和大小,我只希望它更改大小

javascript - 通过 jQuery 的 Controller 打开另一个 View ?

javascript - 在 typescript 上获取泛型类型的参数

jquery - 为什么我的搜索表单不第一次进行搜索?