H5中video和audio标签的使用
[
2019/07/29 11:36 | by 吕进 | Via 本站原创 ]

video主要是播放MP4视频文件,而audio以播放MP4、MP3等音频文件为主。
controls 属性设置或返回浏览器应当显示标准的视频控件。
该属性反映了video标签的controls 属性。
当使用该属性时,它指定了显示视频控件。
视频控件包含:
1、播放
2、暂停
3、进度条
4、音量
5、全屏切换(供视频)
6、字幕(当可用时)
7、轨道(当可用时)
注意: video元素是 HTML5 新增的。
文章参考:runoob.com
直接上代码:
代码一:在head引用html5media.js文件:
代码二:video标签
代码三:audio标签
如果不允许客户端执行下载,请加上nodownload:
controls 属性设置或返回浏览器应当显示标准的视频控件。
该属性反映了video标签的controls 属性。
当使用该属性时,它指定了显示视频控件。
视频控件包含:
1、播放
2、暂停
3、进度条
4、音量
5、全屏切换(供视频)
6、字幕(当可用时)
7、轨道(当可用时)
注意: video元素是 HTML5 新增的。
文章参考:runoob.com
直接上代码:
代码一:在head引用html5media.js文件:
<script src="app/html5media.js"></script>
代码二:video标签
<video width="320" height="240" controls>
<source src="/i/movie.mp4" type="video/mp4" media="screen and (min-width:320px)">
</video>
<source src="/i/movie.mp4" type="video/mp4" media="screen and (min-width:320px)">
</video>
代码三:audio标签
<audio src="../wpnb01.mp3" controls="controls" controlsList="nodownload" οncοntextmenu="return false">
</audio>
</audio>
如果不允许客户端执行下载,请加上nodownload:
引用
controlsList="nodownload" οncοntextmenu="return false"
出现背景:比如,篇幅很长的文章在手机端预览时,会出现很长的横向滚动条。
基本定义:为不同终端的用户提供更加舒适的界面和更好的用户体验。简而言之,就是一个网站能够兼容多个终端。
根本宗旨:写一次代码,跑在一万种设备上
核心思想:不就是设置宽度么?
实现方式:根据不同设备,设置不同CSS样式,设置该设备支持的页面宽(高)。
在设置时,需要注意设置顺序,如
@media screen and (min-width:1200px)
@media screen and (min-width:980px)
@media screen and (min-width:768px)
@media screen and (min-width:480px)
@media screen and (max-width:479px)
否则,后面的会覆盖前面的样式。
基本定义:为不同终端的用户提供更加舒适的界面和更好的用户体验。简而言之,就是一个网站能够兼容多个终端。
根本宗旨:写一次代码,跑在一万种设备上
核心思想:不就是设置宽度么?
实现方式:根据不同设备,设置不同CSS样式,设置该设备支持的页面宽(高)。
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>响应式布局</title>
<!--
当设备最大宽度大于480px时,按不同的设备宽度使用不同的样式
即:设备宽度在480px以内时,使用移动端样式,mobile样式
-->
<link rel="stylesheet" href="css/pc.css" media="only screen and (min-width:1200px)"/>
<link rel="stylesheet" href="css/pc_zd.css" media="only screen and (min-width:980px) and (max-width:1199px)"/>
<link rel="stylesheet" href="css/pad.css" media="only screen and (min-width:768px) and (max-width:979px)"/>
<link rel="stylesheet" href="css/shouji.css" media="only screen and (min-width:480px) and (max-width:767px)"/>
<link rel="stylesheet" href="css/mobile.css" media="only screen and (max-width:479px)"/>
</head>
<body ondragstart="return false" oncontextmenu="return false" onselectstart="return false">
<div>
<p>
响应式布局
</p>
</div>
<div></div><div></div><div></div></body>
</html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>响应式布局</title>
<!--
当设备最大宽度大于480px时,按不同的设备宽度使用不同的样式
即:设备宽度在480px以内时,使用移动端样式,mobile样式
-->
<link rel="stylesheet" href="css/pc.css" media="only screen and (min-width:1200px)"/>
<link rel="stylesheet" href="css/pc_zd.css" media="only screen and (min-width:980px) and (max-width:1199px)"/>
<link rel="stylesheet" href="css/pad.css" media="only screen and (min-width:768px) and (max-width:979px)"/>
<link rel="stylesheet" href="css/shouji.css" media="only screen and (min-width:480px) and (max-width:767px)"/>
<link rel="stylesheet" href="css/mobile.css" media="only screen and (max-width:479px)"/>
</head>
<body ondragstart="return false" oncontextmenu="return false" onselectstart="return false">
<div>
<p>
响应式布局
</p>
</div>
<div></div><div></div><div></div></body>
</html>
在设置时,需要注意设置顺序,如
@media screen and (min-width:1200px)
@media screen and (min-width:980px)
@media screen and (min-width:768px)
@media screen and (min-width:480px)
@media screen and (max-width:479px)
否则,后面的会覆盖前面的样式。
1、首先下载附件,当然需解压;
2、将MkEncrypt.php上传;
3、在需要加密的页面引用以下代码:
下载文件 (已下载 326 次)
2、将MkEncrypt.php上传;
3、在需要加密的页面引用以下代码:
<?php
error_reporting(0);
include("MkEncrypt.php");
//注意文件目录正确
MkEncrypt("123123123",'');
//访问当前页面的密码
?>
如果主页面未添加“error_reporting(0);”,需将MkEncrypt.php下面的setcookie()函数需注释掉,否则会不错;error_reporting(0);
include("MkEncrypt.php");
//注意文件目录正确
MkEncrypt("123123123",'');
//访问当前页面的密码
?>
