> 文章列表 > 通过案例来了解响应式开发(HTML,CSS)的视频控件

通过案例来了解响应式开发(HTML,CSS)的视频控件

通过案例来了解响应式开发(HTML,CSS)的视频控件

目录

前言

一、视频控件的使用方法

1.语法

二、部分属性

 二、案例举例

三、播放效果


前言

1.本文讲解的响应式开发技术(HTML5+CSS3+Bootstrap)的HTML5表单等功能方法的代码,这也是很多教材的一个典型案例;

2.本文将讲解涉及到HTML5表单等功能方法的知识点,其它方面会大致讲一下;

3.本代码是使用visual Studio Code编写的,其他软件如DW,HBX等都是可以的;

4.运行浏览器是谷歌,同时推荐使用谷歌浏览器;

5.这个案例是我上学跟老师所讲做出来的,有些地方不是很完美,请见谅也请多赐教;


提示:以下是本篇文章正文内容,下面案例可供参考

一、视频控件的使用方法

1.语法

<video src="视频文件路径” controls="controls">

视频控件的使用方法

</video>

二、部分属性

<video>的部分属性
属性名称 参数说明
src(url) 表示播放视频的URL地址
width/height 表示视频播放器的宽度和高度
muted 表示视频播放时被静音
autoplay 表示视频即刻播放

 二、案例举例

代码如下,仅供参考:

<!DOCTYPE html>
<html><head><meta charset="UTF-8"><title>video视频控件</title>
</head>
<body><video src="video/ln.mp4" controls>这是一个简单的播放视频控件,播放的内容是“中国·辽宁”宣传片</video>
</body></html>

以上便是video本地视频播放的代码,这是一个本地视频资源,视频来源于网络,若侵权,请联系删除。

三、播放效果

运行如下,仅供参考: