Question

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

以下是我的网页的外观：

我希望视频能够准确播放屏幕在图片中的位置，并且是屏幕的确切大小。有人可以通过提供关于如何执行此操作的教程的良好链接来帮助我。我不是一个完整的新手，但我对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/

上的工作示例

Answer 2

为您的视频元素创建一个包含div

<div id="cinema">
    <video id="example_video_1" class="video-js vjs-default-skin" controls preload="auto" poster="http://lorempixel.com/376/208/" data-setup='{"example_option":true}'>
        <source src="../Videos/JungleAnimals.mp4" type='video/mp4' />
    </video>
</div>

并将其背景设置为您的电影形象：

#cinema {
    background-image: url(http://oi61.tinypic.com/kbozh4.jpg);
    position: relative;
    width: 450px;
    height: 344px;
}

通过将其位置设置为relative，您可以将视频相对于包含div进行定位：

#cinema video {
    position: absolute;
    left: 37px;
    top: 23px;
    width: 376px;
    height: 208px;
}

这样你就可以将整个事物作为一个单元移动。

演示：http://jsfiddle.net/G22Wj/

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

2 个答案: