视频标签在播放时移动

时间:2015-11-30 01:51:44

标签: html css html5 html5-video

只是响应式视频语法的标准代码。源标签有问题吗?



<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>PIXELS: Adventure V. The Five Orange Pips</title>
		<style>
			video{
				width: 100%;
				height: auto;
				
			}
		</style>
	</head>
	<body>
		<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Libero accusantium aliquam unde explicabo molestias molestiae laboriosam mollitia veniam dicta, inventore, aliquid harum ex omnis! Sapiente ut necessitatibus est, esse facere!</p>
		<video  id="player1" width="480" height="270" controls preload="none">
			<source src="http://mediaelementjs.com/media/echo-hereweare.mp4" type="video/mp4">
			<source src="http://mediaelementjs.com/media/echo-hereweare.webm" type="video/webm">
		<source src="http://mediaelementjs.com/media/echo-hereweare.ogv" type="video/ogg"> </video>
		<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Unde placeat eligendi magnam nulla, corporis nobis saepe veniam minus. Quae magni adipisci itaque fugiat pariatur tempora non eligendi, similique rem iusto!</p>
		
	</body>
</html>
&#13;
&#13;
&#13;

我的视频标签在点击播放按钮后按下我的布局。我缺少什么?我曾尝试使用Chrome和Firefox。

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
        <title>    PIXELS: Adventure V. The Five Orange Pips</title>
    <style>
        video{
            width: 100%;
            height: auto;

        }
    </style>
</head>
<body>
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Libero accusantium aliquam unde explicabo molestias molestiae laboriosam mollitia veniam dicta, inventore, aliquid harum ex omnis! Sapiente ut necessitatibus est, esse facere!</p>
    <video  id="player1" width="480" height="270" controls preload="none">
        <source src="http://mediaelementjs.com/media/echo-hereweare.mp4" type="video/mp4">
        <source src="http://mediaelementjs.com/media/echo-hereweare.webm" type="video/webm">
    <source src="http://mediaelementjs.com/media/echo-hereweare.ogv" type="video/ogg"> </video>
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Unde placeat eligendi magnam nulla, corporis nobis saepe veniam minus. Quae magni adipisci itaque fugiat pariatur tempora non eligendi, similique rem iusto!</p>

</body>

0 个答案:

没有答案