【H5音视频处理+less-css预处理器】

如何实现在网页里播放音频和视频？

方法一：使用HTML方法实现
方法二：使用HTML5新增的多媒体元素实现

方法一：使用HTML方法实现

//html视频
<object id="video" width="400" height="200" border="0" classid="clsid:CFCDAA03-8BE4-11cf-B84B-0020AFBBCCFA">
        <param name="ShowDisplay" value="0">
        <param name="ShowControls" value="0">
        <param name="AutoStart" value="0">
        <param name="AutoRewind" value="0">
        <param name="PlayCount" value="0">
        <param name="Appearance value="0 value="">
        <param name="BorderStyle value="0 value="">
        <param name="MovieWindowHeight" value="240">
        <param name="MovieWindowWidth" value="320">
        <param name="FileName" value="movie.ogg">
        <embed width="400" height="200" border="0" showdisplay="0" showcontrols="0"
               autostart="0" autorewind="0" playcount="0" moviewindowheight="240"
               moviewindowwidth="320" filename="movie.ogg" src="movie.ogg">
        </embed>
    </object>

//html音频
<param name="ShowDisplay" value="0">
<param name="ShowControls" value="0">
<param name="AutoStart" value="0">
<param name="AutoRewind" value="0">
<param name="PlayCount" value="0">
<param name="Appearance value="0 value="">
<param name="BorderStyle value="0 value="">
<param name="MovieWindowHeight" value="240">
<param name="MovieWindowWidth" value="320">
<param name="FileName" value="movie.ogg">
<embed src=music.mp3 width=300 type=audio/mpeg loop="-1"
             autostart="false" volume="0">
</embed>

结论：使用HTML方法实现

代码冗长
没有安装flash插件无法观看视频
需要结合使用比较复杂的object元素与embed元素，且要为object添加很多属性

方法二：使用HTML5新增的多媒体元素实现

audio

使用video元素播放视频、audio元素播放音频
支持HTML5的浏览器即可

<h2>在html5中播放音频：</h2> 
<audio src="vedio/song.ogg" controls="controls" autoplay="autoplay">
        您的浏览器不支持audio元素播放的音频
</audio>

属性	值	说明
controls	controls	如果出现该属性，则向用户显示控件，比如播放按钮
autoplay	autoplay	如果出现该属性，则音频在就绪后马上播放
loop	loop	如果出现该属性，则当音频结束时重新开始播放
preload	auto/meta/none	如果出现该属性，则音频在页面加载时进行加载，并预备播放 auto:-当页面加载后载入整个音频 meta:当页面加载后只载入元数据 none:当页面加载后不载入音频

如果浏览器不支持：

各个浏览器默认解析不同：

常见的音频格式

.mp3、.ogg、wav等格式。 不同浏览器对不同类型文件支持情况不同

** **	IE9	Firefox3.5	Opera10.5	Chrome3.0	Safari3.0
Ogg	** **	√	√	√
MP3	√			√	√
Wav		√	√		√

source元素

audio元素允许多个source元素
source可链接不同的音频文件

<h2>在html5中播放音频：</h2> 
<audio controls="controls">
       <source src="vedio/song.ogg"/>
       <source src="vedio/song.mp3"/>
         您的浏览器不支持audio元素播放的音频
</audio>

Video

<h2>在html5中播放视频：</h2>
<video src="vedio/vedio.ogg" controls="controls">
    您的浏览器不支持video播放的视频
</video>

属性	值	说明
controls	controls	如果出现该属性，则向用户显示控件，比如播放按钮
autoplay	autoplay	如果出现该属性，则视频在就绪后马上播放
loop	loop	如果出现该属性，则当视频结束时重新开始播放
preload	auto	如果出现该属性，则视频在页面加载时进行加载，并预备播放
width/height	length(px)	设置视频播放器的宽度/高度

如果浏览器不支持：

各个浏览器默认解析不同：

常见的视频格式：

.avi、.flv、.mp4、.mkv、.ogv

** **	IE	Firefox	Opera	Chrome	Safari
Ogg	No	3.5+	10.5+	5.0+	No
mp4	9.0+	No	No	5.0+	3.0+
WebM	No	4.0+	10.6+	6.0+	No

source元素

video元素允许多个source元素
source可链接不同的视频文件

<h2>在html5中播放音频：</h2> 
<video controls="controls">
      <source src="vedio/vedio.mp4"/>
      <source src="vedio/vedio.ogg"/>
      <source src="vedio/video.webm"/>
     您的浏览器不支持video播放的视频
</video>

打造个性的视频播放器

不同浏览器中视频样式、音频样式不一样？如何解决？

打造个性的视频播放器需要用到的属性

• controls : 显示或隐藏用户控制界面
• autoplay : 媒体是否自动播放
• loop : 媒体是否循环播放
• paused : 媒体是否暂停(只读)
• ended : 媒体是否播放完毕(只读) - currentTime : 开始播放到现在所用的时间
• duration : 媒体总时间(只读)
• volume : 0.0-1.0的音量相对值
• muted : 是否静音 - playbackRate：设置或返回音频/视频的当前播放速度 [1.0 正常速度 0.5 半速(更慢) 2.0 倍速(更快) -1.0 向后,正常速度 -0.5 向后,半速]

视频播放器需要用到的方法

play() : 媒体播放
pause() : 媒体暂停 requestFullscreen() 谷歌浏览器前缀webkitRequestFullScreen()

视频播放器需要用到的事件

canplay:当浏览器能够开始播放指定的音频/视频时，发生 canplay 事件。 timeupdate : 时间更新 ended:播放结束

less-css预处理器

简介

CSS（层叠样式表）是一门历史悠久的标记性语言，同 HTML 一道，被广泛应用于万维网（World Wide Web）中。HTML 主要负责文档结构的定义，CSS 负责文档表现形式或样式的定义。

作为一门标记性语言，CSS 的语法相对简单，对使用者的要求较低，但同时也带来一些问题：CSS 需要书写大量看似没有逻辑的代码，不方便维护及扩展，不利于复用，尤其对于非前端开发工程师来讲，往往会因为缺少 CSS 编写经验而很难写出组织良好且易于维护的 CSS 代码，造成这些困难的很大原因源于 CSS 是一门非程序式语言，没有变量、函数、SCOPE（作用域）等概念。LESS 为 Web 开发者带来了福音，它在 CSS 的语法基础之上，为CSS赋予了动态语言的特性，如变量、继承、运算、函数等，更方便CSS的编写和维护。大大简化了 CSS 的编写，并且降低了 CSS 的维护成本

sass/scss

编译工具

• vscode
  • easy less
• Koala编译
  • 国人开发的LESS\SASS编译工具
  • 下载地址：http://koala-app.com/index-zh.html
• 文件后缀 .less

LEES语法

1 注释

• 可以使用CSS中的注释
• 也可以使用

2 变量

Less中声明变量一定要用@开头，比如：@变量名:值

//1.声明变量
@test_width:300px;
.box{
   //2.使用变量
   width: @test_width;
   height: @test_width;
   border: 1px solid white;
   background-color: yellow;
}

它编译后的css文件中@test_width就直接替换为300px;了。

3 混合 - （Mixin）

混合是一种将一组属性从一个规则集 包含（或混入）到另一个规则集的方法。

把一组样式混合到另外一组样式中。（类似于函数的调用）

• 基础混合用法

• 带参数的混合

  • .border-radius(@radius){css代码}

• 可设定默认值

  • border-radius(@radius:5px){css代码}

Less：

@test_width:300px;
//混合
.border{
 border: 5px solid pink;
}
.box{
     width: @test_width;
     height: @test_width;
     background-color: yellow;
     .border();
}

.box2{
     .box;
     margin-left: 100px;
}

生成后的CSS：

.border {
    border: 5px solid pink;
}
.box {
     width: 300px;
     height: 300px;
     background-color: yellow;
     border: 5px solid pink;
}

.box2 {
    width: 300px;
    height: 300px;
    background-color: yellow;
    border: 5px solid pink;
    margin-left: 100px;
}

带参数的混合，Less：

//混合 - 可带参数的
.border_02(@border_width){
     border: solid yellow @border_width;
}

.test_hunhe{
     .border_02(30px);
}

带默认值参数的混合，Less：

.border_03(@border_width:10px){
     border: solid green @border_width;
}
.text_hunhe_03{
     .border_03();
}

在引用.border_03的时候没有传递至，那么默认的值就是10px。

4 匹配模式

• 相当于JS中的if，但不完全是
• 满足匹配条件后才能匹配

我们来看一个画三角的例子，如果你知道怎么画更好：

HTML：

<div class="sanjiao"></div>

Less：

.sanjiao{
     width: 0;
     height: 0;
     overflow: hidden;
     border-width: 10px;
     border-color: transparent transparent red transparent;
     border-style: dashed dashed solid dashed;
}

这是画一个向上的三角，如果我们要改变三角的朝向，我们得改变border-color，我们得写几遍大部分都一样的代码，而用来模式匹配之后：

Less：

//模式匹配
.triangle(top,@width:5px,@color:#ccc){
     border-width: @width;
     border-color: transparent transparent @color transparent;
     border-style: dashed dashed solid dashed;
}
.triangle(bottom,@width:5px,@color:#ccc){
     border-width: @width;
     border-color: @color transparent transparent transparent;
     border-style: dashed dashed solid dashed;
}
.triangle(left,@width:5px,@color:#ccc){
     border-width: @width;
     border-color: transparent @color transparent transparent;
     border-style: dashed solid dashed dashed;
}
.triangle(right,@width:5px,@color:#ccc){
     border-width: @width;
     border-color: transparent transparent transparent @color;
     border-style: dashed dashed dashed solid;
}

然后我们需要什么方向调用的时候就传什么方向：

.sanjiao{
     width: 0;
     height: 0;
     overflow: hidden;
     .triangle(right,100px);
}

但是，里面的width、height又要重写一遍，而Less给我们提供了一个东西，它不管你如何选择什么三角方向，它总会带上那个东西，有点像Java里面的finally块，无论你try块里做了什么，Java始终会执行finally块里的代码，好了，我们来看下Less班的finally如何写：

.triangle(@_,@width:5px,@color:#ccc){
     width: 0;
     height: 0;
     overflow: hidden;
}
.sanjiao{
     .triangle(right,100px);
}

发现了没？就是一个“@*”参数！无论你选择top是right方向，带@*参数的triangle都会被带上，调用的时候就没必要再写width，height等。

如果你觉得上面比较复杂了一点，OK，我们来一个简单的例子，div定位的例子

HTML：

<div class="pipei"></div>

写三个定位，相对定位、绝对定位和固定定位

Less：

//匹配模式 - 定位
.post(r){
     position: relative;
}
.post(a){
     position: absolute;
}
.post(f){
     position: fixed;
}

.pipei{
     width: 200px;
     height: 200px;
     background-color: green;
     .post(r);
}

这样，这个div就是相对定位了。

5 运算

在Less中，任何数组、颜色或者变量都可以参与运算，运算应该被包裹在括号中。例如：+ - * /

给宽度增加20px然后在乘以5个像素，Less：

@test_01:300px;

.box_02{
 width: (@test_01 + 20) * 5;
}

6 嵌套规则

Less中的嵌套是最有意思的小东西了、我们创建这个一个列表：

<ul class="list">
   <li>
       <a href="#">Less的嵌套用法</a>
       <a href="#">Less的嵌套用法</a>
       <a href="#">Less的嵌套用法</a>
       <a href="#">Less的嵌套用法</a>
       <a href="#">Less的嵌套用法</a>
   </li>
 </ul>

Less：

.list{
   width: 600px;
   margin: 30px auto;
   padding: 0;
   list-style: none;
 
   li{
       height: 30px;
       line-height: 30px;
       background-color: pink;
       margin-bottom: 5px;
       padding: 0 10px;
   }
   a{
       float: left;
       //& 代表它的上一层选择器
       &:hover{
             color: red;
       }
   }
   span{
         float: right;
   }
}

它编译后生成的CSS就是这样的：

.list {
    width: 600px;
    margin: 30px auto;
    padding: 0;
    list-style: none;
}
.list li {
    height: 30px;
    line-height: 30px;
    background-color: pink;
    margin-bottom: 5px;
    padding: 0 10px;
}
.list a {
    float: left;
}
.list a:hover {
    color: red;
}
.list span {
    float: right;
}

7 @arguments变量

@arguments包含了所有传递进来的参数。如果你不想单独处理每一个参数的话就可以像这样写：

Less：

Less：
.border_arg(@w:30px,@c:red,@xx:solid){
   //border:@w @c @xx;
   //等价 
   border: @arguments;
}
.test_arguments{
   .border_arg();
}

这样@arguments就自动帮我们注入了所有的参数，省了那么一丢丢的代码。

8 避免编译、!important以及总结

避免编译

• 有时候我们不需要输出一些不正确的CSS语法或使用一些Less不认识的专有语法。
• 要输出这样的值，我们可以在字符串前加一个_{，例如：width:}‘clac(100% - 35)’
• 在 Less 3.5+ 版本中，许多以前需要“引号转义”的情况就不再需要了。

Less：

.test_03 {
    width: calc(200px - 30px);
}

这样的话，编译后的CSS就自动帮你计算了

CSS：

.test_03 {
    width: calc(170px);
}

但我们并不想它在编译时被计算，而是想让浏览器去计算，这时候我们就需要添加~符号了：

.test_03{
     width: ~'calc(200px - 30px)';
}

这样，就可以避免编译，输出的CSS就是这样（原样输出）

.test_03 {
      width: calc(200px - 30px);
}

!important关键字

会为所有混合所带来的样式，添加!important

less

span{
 .fs(50px, #fff) !important;
}

css:

span {
  font-size: 50px !important;
  color: #fff !important;
}

9.导入（Importing）

“导入”的工作方式和你预期的一样。你可以导入一个 .less 文件，此文件中的所有变量就可以全部使用了。如果导入的文件是 .less 扩展名，则可以将扩展名省略掉：

@import "library"; // library.less
@import "typo.css";