html5新增的视频播放器基本布局

最新推荐文章于 2024-04-05 09:45:30 发布

Mr_jianghanlin

最新推荐文章于 2024-04-05 09:45:30 发布

阅读量1.1k

点赞数

分类专栏：前端文章标签： html html5 css3

本文链接：https://blog.csdn.net/mr_jianghanlin/article/details/105935324

版权

前端专栏收录该内容

23 篇文章 2 订阅

订阅专栏

html5新增的视频播放器属性布局

首先给大家看看最终实验的图形

在这里插入图片描述

当鼠标放到视频上面时候，显示所有小按钮，当鼠标移走就不显示所有小按钮。

视频的属性是：video标签

<video src="movie.ogg" controls="controls">
您的浏览器不支持 video 标签。
</video>

video：html5新增属性

属性	值	描述
autoplay	autoplay	如果出现该属性，则视频在就绪后马上播放。
controls	controls	如果出现该属性，则向用户显示控件，比如播放按钮。
height	pixels	设置视频播放器的高度
loop	loop	如果出现该属性，则当媒介文件完成播放后再次开始播放
muted	muted	规定视频的音频输出应该被静音。
poster	URL	规定视频下载时显示的图像，或者在用户点击播放按钮前显示
preload	preload	如果出现该属性，则视频在页面加载时进行加载，并预备播放。如果使用 “autoplay”，则忽略该属性。
src	url	要播放的视频的 URL。
width	pixels	设置视频播放器的宽度。

视频的页面侧面有一些小按钮。这些按钮是一些小图片，可以通过应用JavaScript，实现点击事件，控制小图片的显示。

下面来看看具体的实现代码：


<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<style>
    .sty {
        width: 600px;
        height: 380px;
        background-color: black;

    }

    .one {
        width: 40px;
        height: 200px;
        display: flex;
        flex-wrap: wrap;
        align-items: center;
        margin-left: -40px;
        z-index: 2;


    }

    .content {
        display: flex;
        align-items: center;
    }
</style>
<script>
    function fun1() {
        var p = document.getElementById('idname');
        p.style.opacity = 1;
    }
    function fun2() {
        var p = document.getElementById('idname');
        p.style.opacity = 0;
    }


</script>

<body>
    <div class="content" οnmοuseοver="fun1()" οnmοuseοut="fun2()">
        <video class="sty" src="movie.mp4" controls autoplay></video>
        <div id="idname" class="one">
            <div class="oneimg1"><a href="#"><img src="fenxiang.png" alt=""></a></div>
            <div><img src="huazhixianxing.png" alt=""></div>
            <div><img src="suoping.png" alt=""></div>
            <div><img src="zan.png" alt=""></div>
        </div>
    </div>
</body>

</html>

以上代码用到了一下的图片和视频，视频我就不传了，我把小图片传了。

在这里插入图片描述

Mr_jianghanlin

关注

0
点赞
踩
9

收藏

觉得还不错? 一键收藏
0
评论
html5新增的视频播放器基本布局

html5新增的视频播放器属性布局首先给大家看看最终实验的图形当鼠标放到视频上面时候，显示所有小按钮，当鼠标移走就不显示所有小按钮。视频的属性是：video标签<video src="movie.ogg" controls="controls">您的浏览器不支持 video 标签。</video>video：html5新增属性属性值描述...
复制链接

扫一扫