HTML5视频编码器大揭秘！H.264专利费争议

咱们前几篇文章学过了HTML5的特点和基础知识，现在来看看它有哪些牛逼之处！首先，得懂得视频文件是什么样子滴~

一、视频的格式

你知道吗？现在最流行的视频格式就是：avi, rmvb, wmv, mpeg4, ogg和webm这几种！它们其实都是由视频、音频还有编码格式这几个部分组成的。而在HTML5里头，由于每个浏览器都不太一样，所以我们有很多种不同的编码器可以选呢：

-H.264：这个很常见？就是苹果系统里那个专利的编码器。要注意，用它的话可能得给人家付点钱！所以Safari和Internet Explorer都支持它，不过现在大家都觉得收专利费有点过了。

– Theora：这个东西没有什么专利限制，无论是视频编码还是播放都不用花钱。感觉就像是一款开源的视频编辑软件。

– VP8就跟Theora差不多，只不过它是Google家的。Google家现在把这个都公开了，用VP8编码器不需要给他们钱。

– AAC：这个你听过？和H.264差不多，有专利保护的！苹果浏览器Safari、谷歌浏览器Chrome和微软的IE都能用。

– MP3：也是一项专利技术，被多个主流浏览器支持。

– PCM就是用来存音质好的那种数字化录音，常在音像店里见到的音频CD就用它来保存。

Vorbis也叫Ogg Vorbis，它是个自由的音频格式，所以可以随便用。你看像Chrome啊、Firefox啊还有Opera这些浏览器都能用得很顺手滴。

选视频格式？得看你打算在哪些浏览器或设备上看了，了解下它们都支持啥格式呗！

二、HTML5中的属性

用 HTML5，只要用一个<video>标签就能搞定媒体文件的播放！它还有个属性叫‘controls’，能让你决定要不要出现那个控制条。至于视频格式这事儿，根据上面说的，我们可以给每个浏览器设定不一样的视频格式，然后浏览器就会自己跑去下载来判断是啥。

三、制作视频播放器

想做个简单好用的视频播放器？我们得先搞定这几件事：

我们在`index.html`里建了个结构，好让视频播放器跑起来。

2.`style.css`：定义视频播放器的样式文件。

`video.js`:就是那个搞定视频播放的JavaScript程序~

搞定这三个文件，咱们就能做出一款超赞的HTML5视频播放器！首先在`index.html`里设好“标签，然后在`style.css`里搞定样式，最后再用`video.js`来搞播放控制这些事儿。

HTML5视频编码器大揭秘！H.264专利费争议

四、优化用户体验

为了提升用户体验，在制作视频播放器时可以考虑以下几点：

流动设计：保证视频播放器不管在哪儿都能用得溜，还特别好使。

2.加载速度：优化视频加载速度，避免用户等待时间过长。

高清切换：提供多档清晰度选猜，适应各种网速环境。

4.全屏功能：增加全屏按钮，方便用户全屏观看影片。

5.字幕支持：考虑为视频添加字幕功能，提升用户体验。

五、浏览器兼容性

做HTML5视频播放器可别忘了考虑浏览器对媒体格式和API的兼容问题。比如像Chrome、Safari这类移动端常用浏览器，它们对HTML5标准可是相当友好！开发的时候可得把兼容性测试搞得妥妥当当哈。

六、安全性考虑

搞网页嵌入视频时，要注意保护安全！别让黑客乱插恶意代码或者被别人盗链了。用HTTPS传输数据能防止泄露个人信息的。

七、社交分享功能

在放视频的页面上加个分享功能挺好的，用户能把喜欢的东西随手分享给朋友圈！

八、SEO优化

  
  
  
Demo 1 | Custom HTML5 Video Controls with jQuery  
  
  
  
  
  
  
  
  
  
  
  
  
  
    Custom HTML5 Video Controls with jQuery  
      
 BACK TO ARTICLE »  
        Visit inWebson.com »  
      
      
  
  
  
  
  
      
    Demo 1  
    Custom HTML5 Video Controls  
  
  
      
    
Your browser does not support the video tag.  
      
    This is HTML5 video with custom controls  
      
  
        
  
            
  
                  
                  
              
              
                 /   
                   
              
          
          
          
            
  
              
            Speed:   
            x1  
            x3  
              
              
              
                  
              
              
          
          
      
      
  
  
      
      
          
            DEMO 1  
            DEMO 2  
          
              
      
  
  
  
  
    © 2011 inWebson.com. 
    Design by Kenny Ooi. 
    Powered by HTML5 and 
    jQuery.

网站里有视屏的网页要做SEO优化！标题，介绍还有关键词得弄好点，这样搜素引擎才能找得到、排在前面。

好啦～这就是做HTML5视频播放器的基础知识和要注意的地方，赶紧动手做个你自己喜欢的乖巧播放器！

/* video container */  
.videoContainer{  
    width:600px;  
    height:350px;  
    position:relative;  
    overflow:hidden;  
    background:#000;  
    color:#ccc;  
}  
  
/* video caption css */  
.caption{  
    display:none;  
    position:absolute;  
    top:0;  
    left:0;  
    width:100%;  
    padding:10px;  
    color:#ccc;  
    font-size:20px;  
    font-weight:bold;  
    box-sizing: border-box;  
    -ms-box-sizing: border-box;  
    -webkit-box-sizing: border-box;  
    -moz-box-sizing: border-box;  
    background: #1F1F1F; /* fallback */  
    background:-moz-linear-gradient(top,#242424 50%,#1F1F1F 50%,#171717 100%);  
    background:-webkit-linear-gradient(top,#242424 50%,#1F1F1F 50%,#171717 100%);  
    background:-o-linear-gradient(top,#242424 50%,#1F1F1F 50%,#171717 100%);  
}  
  
/*** VIDEO CONTROLS CSS ***/  
/* control holder */  
.control{  
    background:#333;  
    color:#ccc;  
    position:absolute;  
    bottom:0;  
    left:0;  
    width:100%;  
    z-index:5;  
    display:none;  
}  
/* control top part */  
.topControl{  
    height:11px;  
    border-bottom:1px solid #404040;  
    padding:1px 5px;  
    background:#1F1F1F; /* fallback */  
    background:-moz-linear-gradient(top,#242424 50%,#1F1F1F 50%,#171717 100%);  
    background:-webkit-linear-gradient(top,#242424 50%,#1F1F1F 50%,#171717 100%);  
    background:-o-linear-gradient(top,#242424 50%,#1F1F1F 50%,#171717 100%);  
}  
/* control bottom part */  
.btmControl{  
    clear:both;  
    background: #1F1F1F; /* fallback */  
    background:-moz-linear-gradient(top,#242424 50%,#1F1F1F 50%,#171717 100%);  
    background:-webkit-linear-gradient(top,#242424 50%,#1F1F1F 50%,#171717 100%);  
    background:-o-linear-gradient(top,#242424 50%,#1F1F1F 50%,#171717 100%);  
}  
.control p.btn {  
    float:left;  
    width:34px;  
    height:30px;  
    padding:0 5px;  
    border-right:1px solid #404040;  
    cursor:pointer;  
}  
.control p.text{  
    font-size:12px;  
    font-weight:bold;  
    line-height:30px;  
    text-align:center;  
    font-family:verdana;  
    width:20px;  
    border:none;  
    color:#777;  
}  
.control p.btnPlay{  
    background:url(control.png) no-repeat 0 0;  
    border-left:1px solid #404040;  
}  
.control p.paused{  
    background:url(control.png) no-repeat 0 -30px;  
}  
.control p.btnStop{  
    background:url(control.png) no-repeat 0 -60px;  
}  
.control p.spdText{  
    border:none;  
    font-size:14px;  
    line-height:30px;  
    font-style:italic;  
}  
.control p.selected{  
    font-size:15px;  
    color:#ccc;  
}  
.control p.sound{  
    background:url(control.png) no-repeat -88px -30px;  
    border:none;  
    float:right;  
}  
.control p.sound2{  
    background:url(control.png) no-repeat -88px -60px !important;  
}  
.control p.muted{  
    background:url(control.png) no-repeat -88px 0 !important;  
}  
.control p.btnFS{  
    background:url(control.png) no-repeat -44px 0;  
    float:right;  
}  
.control p.btnLight{  
    background:url(control.png) no-repeat -44px -60px;  
    border-left:1px solid #404040;  
    float:right;  
}  
.control p.lighton{  
    background:url(control.png) no-repeat -44px -30px !important;  
}  
  
/* PROGRESS BAR CSS */  
/* Progress bar */  
.progress {  
    width:85%;  
    height:10px;  
    position:relative;  
    float:left;  
    cursor:pointer;  
    background: #444; /* fallback */  
    background:-moz-linear-gradient(top,#666,#333);  
    background:-webkit-linear-gradient(top,#666,#333);  
    background:-o-linear-gradient(top,#666,#333);  
    box-shadow:0 2px 3px #333 inset;  
    -moz-box-shadow:0 2px 3px #333 inset;  
    -webkit-box-shadow:0 2px 3px #333 inset;  
    border-radius:10px;  
    -moz-border-radius:10px;  
    -webkit-border-radius:10px;  
}  
.progress span {  
    height:100%;  
    position:absolute;  
    top:0;  
    left:0;  
    display:block;  
    border-radius:10px;  
    -moz-border-radius:10px;  
    -webkit-border-radius:10px;  
}  
.timeBar{  
    z-index:10;  
    width:0;  
    background: #3FB7FC; /* fallback */  
    background:-moz-linear-gradient(top,#A0DCFF 50%,#3FB7FC 50%,#16A9FF 100%);  
    background:-webkit-linear-gradient(top,#A0DCFF 50%,#3FB7FC 50%,#16A9FF 100%);  
    background:-o-linear-gradient(top,#A0DCFF 50%,#3FB7FC 50%,#16A9FF 100%);  
    box-shadow:0 0 1px #fff;  
    -moz-box-shadow:0 0 1px #fff;  
    -webkit-box-shadow:0 0 1px #fff;  
}  
.bufferBar{  
    z-index:5;  
    width:0;  
    background: #777;  
    background:-moz-linear-gradient(top,#999,#666);  
    background:-webkit-linear-gradient(top,#999,#666);  
    background:-o-linear-gradient(top,#999,#666);  
    box-shadow:2px 0 5px #333;  
    -moz-box-shadow:2px 0 5px #333;  
    -webkit-box-shadow:2px 0 5px #333;  
}  
/* time and duration */  
.time{  
    width:15%;  
    float:right;  
    text-align:center;  
    font-size:11px;  
    line-height:12px;  
}  
  
/* VOLUME BAR CSS */  
/* volume bar */  
.volume{  
    position:relative;  
    cursor:pointer;  
    width:70px;  
    height:10px;  
    float:right;  
    margin-top:10px;  
    margin-right:10px;  
}  
.volumeBar{  
    display:block;  
    height:100%;  
    position:absolute;  
    top:0;  
    left:0;  
    background-color:#eee;  
    z-index:10;  
}  
  
/* OTHERS CSS */  
/* video screen cover */  
.loading, #init{  
    position:absolute;  
    top:0;  
    left:0;  
    width:100%;  
    height:100%;  
    background:url(loading.gif) no-repeat 50% 50%;  
    z-index:2;  
    display:none;  
}  
#init{  
    background:url(bigplay.png) no-repeat 50% 50% !important;  
    cursor:pointer;  
}

原文链接：https://www.icz.com/technicalinformation/web/2024/04/15488.html，转载请注明出处~~~

HTML5视频编码器大揭秘！H.264专利费争议

评论0

在线客服

每日签到

夜间模式

返回顶部

HTML5视频编码器大揭秘！H.264专利费争议

Demo 1

Custom HTML5 Video Controls

猜你喜欢

评论0

在线客服

每日签到

夜间模式

返回顶部