javascript - 定位和调整视频播放器的大小

Question

我正在尝试构建一个显示视频的网页。

这是我的网页的外观:

http://tinypic.com/r/kbozh4/8

我希望视频准确播放图片中屏幕所在的位置，并且与屏幕大小一致。有人可以通过提供指向有关如何执行此操作的教程的良好链接来帮助我。我不是一个完全的新手，但我对 HTML5、CSS3 和 Javascript 的了解有限。所以请不要太复杂。

这是我刚才用来显示视频播放器、视频及其大小的代码:

    <video id="example_video_1" class="video-js vjs-default-skin" controls preload="auto" width="455" height="455" poster="../Images/JungleAnimals.png" data-setup='{"example_option":true}'>
                    <source src="../Videos/JungleAnimals.mp4" type='video/mp4' />
    </video>

Answer 1

编写如下html代码:

<img src="http://oi61.tinypic.com/kbozh4.jpg">
<video src="Your_video_url" autoplay>

和CSS代码:

video {
 background: #000;
 position: absolute;
 left: 45px;
 top: 31px;
 width: 376px;
 height: 208px;
}

请参阅 http://jsfiddle.net/tLZSB/2/ 中的工作示例