首页 / HTML5 / 小强的HTML5移动开发之路（5）——制作一个漂亮的视频播放器

小强的HTML5移动开发之路（5）——制作一个漂亮的视频播放器

内容导读

互联网集市收集整理的这篇技术教程文章主要介绍了小强的HTML5移动开发之路（5）——制作一个漂亮的视频播放器，小编现在分享给大家，供广大互联网技能从业者学习和参考。文章包含16566字，纯文字阅读大概需要24分钟。

内容图文

在前面几篇文章中介绍了HTML5的特点和需要掌握的基础知识，下面我们开始真正的体验一下Html5的优势，我们开始制作一个漂亮的视频播放器吧先别急，在开始制作之前先了解一下视频文件的基本知识。

一、视频的格式

目前比较主流和使用比较的的视频格式主要有：avi、rmvb、wmv、mpeg4、ogg、webm。这些视频都是由视频、音频、编码格式三部分组成的。在HTML5中，根据浏览器的不同，目前拥有多套不同的编码器：

H.264(个人不看好)：这个编码器是苹果系统包括苹果手机中的编码器，拥有专利的视频编码器。在编码及传输过程中的任何部分都可能需要收取专利费。因此Safari（苹果的浏览器）和Intenet Explorer支持该编码器，但是在开源已经成为大势的当下，还在浏览器中收取专利费，个人实在是不看好啊。

Theora:这是一个不受专利限制的编码格式，并且对所有等级的编码、传输以及回放免费的视频编码器。Chrome、Firefox以及Opera支持该编码器。

VP8：该视频编码器与Theora相似，但是其拥有者是Google公司，Google公司已经开源，因此不需要专利费。Chrome、Firefox以及Opera支持该编码器。

AAC:音频编码器，与H.264相同，该音频编码器拥有专利限制，Safari、Chrome和Internet Explorer支持该音频编码器。

MP3：也是一个专利技术，Safari、Chrome和Internet Explorer支持该音频编码器。

PCM:存储由模拟数字转换器编码的完整数据，在音频CD上存储数据的一种格式。是以中国无损编码器，它的文件大小一般是AAC和MP3文件的几倍，Safari、Firefox和Internet Explorer支持该音频编码器。

Vorbis:文件扩展名为.ogg，有时候也被称为Ogg Vorbis,该音频编码器不受专利保护，因此版权免费。支持的浏览器包括Chrome、Firefox和Opera.

主流浏览器和设备支持的视频和音频

小强的HTML5移动开发之路（5）——制作一个漂亮的视频播放器 - 文章图片

二、HTML5中的<vido>属性

在html5中可以使用<audio>或者<video>标签播放html5媒体，使用方式如下

<video src="move.mp4"></video>

video标签中有很多属性，例如controls属性可以控制是否有控制台。

<video src="move.mp4" controls="controls">  
    浏览器不支持HTML5的视频播放功能  
</video>

从上面的视频格式中我们可以看到不同的浏览器支持不同的视频格式，这样我们可以采用<source>标签指定多种格式的视频，默认情况下浏览器会自动启动下载文件来确定其类型。

<video width="400" controls="controls">  
    <source src="move.mp4"  type="video/mp4" />  
    <source src="move.ogg"  type="video/ogg" />  
</video>

三、制作视频播放器

index.html

<!DOCTYPE html>  
<html>  
<head>  
<title>Demo 1 | Custom HTML5 Video Controls with jQuery</title>  
<link rel="stylesheet" href="../vendorstyle.css" />  
<link rel="stylesheet" href="style.css" />  
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>  
<!--[if lt IE 9]>  
<script src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script>  
<![endif]-->  
<script src="../vendorscript.js"></script>  
<script src="video.js"></script>  
<!--[if lt IE 9]>  
<script>  
$(document).ready(function() {  
    $('.control').hide();  
    $('.loading').fadeOut(500);  
    $('.caption').fadeOut(500);  
});  
</script>  
<![endif]-->  
<link rel="shortcut icon" href="http://www.inwebson.com/wp-content/themes/inwebson/favicon.ico" />  
</head>  
  
<body>  
<!-- Header -->  
<header>  
    <h1>Custom HTML5 Video Controls with jQuery</h1>  
    <p id="backlinks">  
 <a href="http://www.inwebson.com/custom-html5-video-controls-with-jquery-and-css/">BACK TO ARTICLE »</a>  
        <a href="http://www.inwebson.com">Visit inWebson.com »</a>  
    </p>  
    <p class="clearfix"></p>  
</header>  
  
<!-- Content -->  
<section id="wrapper">  
  
    <!-- Title -->  
    <h2>Demo 1</h2>  
    <h3>Custom HTML5 Video Controls</h3>  
  
<p class="videoContainer">  
      
    <video id="myVideo" controls preload="auto" poster="poster.jpg" width="600" height="350" >  
      <source src="http://demo.inwebson.com/html5-video/iceage4.mp4" type="video/mp4" />  
      <source src="http://demo.inwebson.com/html5-video/iceage4.webm" type="video/webM" />  
      <source src="http://demo.inwebson.com/html5-video/iceage4.ogv" type="video/ogg" />  
      <p>Your browser does not support the video tag.</p>  
    </video>  
    <p class="caption">This is HTML5 video with custom controls</p>  
    <p class="control">  
  
        <p class="topControl">  
            <p class="progress">  
                <span class="bufferBar"></span>  
                <span class="timeBar"></span>  
            </p>  
            <p class="time">  
                <span class="current"></span> /   
                <span class="duration"></span>   
            </p>  
        </p>  
          
        <p class="btmControl">  
            <p class="btnPlay btn" title="Play/Pause video"></p>  
            <p class="btnStop btn" title="Stop video"></p>  
            <p class="spdText btn">Speed: </p>  
            <p class="btnx1 btn text selected" title="Normal speed">x1</p>  
            <p class="btnx3 btn text" title="Fast forward x3">x3</p>  
            <p class="btnFS btn" title="Switch to full screen"></p>  
            <p class="btnLight lighton btn" title="Turn on/off light"></p>  
            <p class="volume" title="Set volume">  
                <span class="volumeBar"></span>  
            </p>  
            <p class="sound sound2 btn" title="Mute/Unmute sound"></p>  
        </p>  
          
    </p>  
    <p class="loading"></p>  
</p>  
  
    <!-- Navigation -->  
    <nav id="navigation">  
        <ul>  
            <li class="currentbtn"><a href="#" title="Demo 1">DEMO 1</a></li>  
            <li><a href="../demo2/" title="Demo 2">DEMO 2</a></li>  
        </ul>  
        <p class="clearfix"></p>      
    </nav>  
</section>  
  
<!-- Footer -->  
<footer>  
    <span>© 2011 <a href="http://www.inwebson.com">inWebson.com</a>. 
    Design by <a href="http://www.inwebson.com/contactus">Kenny Ooi</a>. 
    Powered by <a href="http://www.inwebson.com/html5/">HTML5</a> and 
    <a href="http://www.inwebson.com/jquery/">jQuery</a>.</span>  
</footer>  
</body>  
</html>

style.css

/* 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;  
}

video.js

$(document).ready(function(){  
    //INITIALIZE  
    var video = $('#myVideo');  
      
    //remove default control when JS loaded  
    video[0].removeAttribute("controls");  
    $('.control').show().css({'bottom':-45});  
    $('.loading').fadeIn(500);  
    $('.caption').fadeIn(500);  
   
    //before everything get started  
    video.on('loadedmetadata', function() {  
        $('.caption').animate({'top':-45},300);  
              
        //set video properties  
        $('.current').text(timeFormat(0));  
        $('.duration').text(timeFormat(video[0].duration));  
        updateVolume(0, 0.7);  
              
        //start to get video buffering data   
        setTimeout(startBuffer, 150);  
              
        //bind video events  
        $('.videoContainer')  
        .append('<p id="init"></p>')  
        .hover(function() {  
            $('.control').stop().animate({'bottom':0}, 500);  
            $('.caption').stop().animate({'top':0}, 500);  
        }, function() {  
            if(!volumeDrag && !timeDrag){  
                $('.control').stop().animate({'bottom':-45}, 500);  
                $('.caption').stop().animate({'top':-45}, 500);  
            }  
        })  
        .on('click', function() {  
            $('#init').remove();  
            $('.btnPlay').addClass('paused');  
            $(this).unbind('click');  
            video[0].play();  
        });  
        $('#init').fadeIn(200);  
    });  
      
    //display video buffering bar  
    var startBuffer = function() {  
        var currentBuffer = video[0].buffered.end(0);  
        var maxduration = video[0].duration;  
        var perc = 100 * currentBuffer / maxduration;  
        $('.bufferBar').css('width',perc+'%');  
              
        if(currentBuffer < maxduration) {  
            setTimeout(startBuffer, 500);  
        }  
    };    
      
    //display current video play time  
    video.on('timeupdate', function() {  
        var currentPos = video[0].currentTime;  
        var maxduration = video[0].duration;  
        var perc = 100 * currentPos / maxduration;  
        $('.timeBar').css('width',perc+'%');      
        $('.current').text(timeFormat(currentPos));   
    });  
      
    //CONTROLS EVENTS  
    //video screen and play button clicked  
    video.on('click', function() { playpause(); } );  
    $('.btnPlay').on('click', function() { playpause(); } );  
    var playpause = function() {  
        if(video[0].paused || video[0].ended) {  
            $('.btnPlay').addClass('paused');  
            video[0].play();  
        }  
        else {  
            $('.btnPlay').removeClass('paused');  
            video[0].pause();  
        }  
    };  
      
    //speed text clicked  
    $('.btnx1').on('click', function() { fastfowrd(this, 1); });  
    $('.btnx3').on('click', function() { fastfowrd(this, 3); });  
    var fastfowrd = function(obj, spd) {  
        $('.text').removeClass('selected');  
        $(obj).addClass('selected');  
        video[0].playbackRate = spd;  
        video[0].play();  
    };  
      
    //stop button clicked  
    $('.btnStop').on('click', function() {  
        $('.btnPlay').removeClass('paused');  
        updatebar($('.progress').offset().left);  
        video[0].pause();  
    });  
      
    //fullscreen button clicked  
    $('.btnFS').on('click', function() {  
        if($.isFunction(video[0].webkitEnterFullscreen)) {  
            video[0].webkitEnterFullscreen();  
        }     
        else if ($.isFunction(video[0].mozRequestFullScreen)) {  
            video[0].mozRequestFullScreen();  
        }  
        else {  
            alert('Your browsers doesn\'t support fullscreen');  
        }  
    });  
      
    //light bulb button clicked  
    $('.btnLight').click(function() {  
        $(this).toggleClass('lighton');  
          
        //if lightoff, create an overlay  
        if(!$(this).hasClass('lighton')) {  
            $('body').append('<p class="overlay"></p>');  
            $('.overlay').css({  
                'position':'absolute',  
                'width':100+'%',  
                'height':$(document).height(),  
                'background':'#000',  
                'opacity':0.9,  
                'top':0,  
                'left':0,  
                'z-index':999  
            });  
            $('.videoContainer').css({  
                'z-index':1000  
            });  
        }  
        //if lighton, remove overlay  
        else {  
            $('.overlay').remove();  
        }  
    });  
      
    //sound button clicked  
    $('.sound').click(function() {  
        video[0].muted = !video[0].muted;  
        $(this).toggleClass('muted');  
        if(video[0].muted) {  
            $('.volumeBar').css('width',0);  
        }  
        else{  
            $('.volumeBar').css('width', video[0].volume*100+'%');  
        }  
    });  
      
    //VIDEO EVENTS  
    //video canplay event  
    video.on('canplay', function() {  
        $('.loading').fadeOut(100);  
    });  
      
    //video canplaythrough event  
    //solve Chrome cache issue  
    var completeloaded = false;  
    video.on('canplaythrough', function() {  
        completeloaded = true;  
    });  
      
    //video ended event  
    video.on('ended', function() {  
        $('.btnPlay').removeClass('paused');  
        video[0].pause();  
    });  
  
    //video seeking event  
    video.on('seeking', function() {  
        //if video fully loaded, ignore loading screen  
        if(!completeloaded) {   
            $('.loading').fadeIn(200);  
        }     
    });  
      
    //video seeked event  
    video.on('seeked', function() { });  
      
    //video waiting for more data event  
    video.on('waiting', function() {  
        $('.loading').fadeIn(200);  
    });  
      
    //VIDEO PROGRESS BAR  
    //when video timebar clicked  
    var timeDrag = false;   /* check for drag event */  
    $('.progress').on('mousedown', function(e) {  
        timeDrag = true;  
        updatebar(e.pageX);  
    });  
    $(document).on('mouseup', function(e) {  
        if(timeDrag) {  
            timeDrag = false;  
            updatebar(e.pageX);  
        }  
    });  
    $(document).on('mousemove', function(e) {  
        if(timeDrag) {  
            updatebar(e.pageX);  
        }  
    });  
    var updatebar = function(x) {  
        var progress = $('.progress');  
          
        //calculate drag position  
        //and update video currenttime  
        //as well as progress bar  
        var maxduration = video[0].duration;  
        var position = x - progress.offset().left;  
        var percentage = 100 * position / progress.width();  
        if(percentage > 100) {  
            percentage = 100;  
        }  
        if(percentage < 0) {  
            percentage = 0;  
        }  
        $('.timeBar').css('width',percentage+'%');    
        video[0].currentTime = maxduration * percentage / 100;  
    };  
  
    //VOLUME BAR  
    //volume bar event  
    var volumeDrag = false;  
    $('.volume').on('mousedown', function(e) {  
        volumeDrag = true;  
        video[0].muted = false;  
        $('.sound').removeClass('muted');  
        updateVolume(e.pageX);  
    });  
    $(document).on('mouseup', function(e) {  
        if(volumeDrag) {  
            volumeDrag = false;  
            updateVolume(e.pageX);  
        }  
    });  
    $(document).on('mousemove', function(e) {  
        if(volumeDrag) {  
            updateVolume(e.pageX);  
        }  
    });  
    var updateVolume = function(x, vol) {  
        var volume = $('.volume');  
        var percentage;  
        //if only volume have specificed  
        //then direct update volume  
        if(vol) {  
            percentage = vol * 100;  
        }  
        else {  
            var position = x - volume.offset().left;  
            percentage = 100 * position / volume.width();  
        }  
          
        if(percentage > 100) {  
            percentage = 100;  
        }  
        if(percentage < 0) {  
            percentage = 0;  
        }  
          
        //update volume bar and video volume  
        $('.volumeBar').css('width',percentage+'%');      
        video[0].volume = percentage / 100;  
          
        //change sound icon based on volume  
        if(video[0].volume == 0){  
            $('.sound').removeClass('sound2').addClass('muted');  
        }  
        else if(video[0].volume > 0.5){  
            $('.sound').removeClass('muted').addClass('sound2');  
        }  
        else{  
            $('.sound').removeClass('muted').removeClass('sound2');  
        }  
          
    };  
  
    //Time format converter - 00:00  
    var timeFormat = function(seconds){  
        var m = Math.floor(seconds/60)<10 ? "0"+Math.floor(seconds/60) : Math.floor(seconds/60);  
    var s = Math.floor(seconds-(m*60))<10 ? "0"+Math.floor(seconds-(m*60)) :Math.floor(seconds-(m*60));  
        return m+":"+s;  
    };  
});

以上就是小强的HTML5移动开发之路（5）——制作一个漂亮的视频播放器的内容，更多相关内容请关注PHP中文网（www.gxlcms.com）！

内容总结

以上是互联网集市为您收集整理的小强的HTML5移动开发之路（5）——制作一个漂亮的视频播放器全部内容，希望文章能够帮你解决小强的HTML5移动开发之路（5）——制作一个漂亮的视频播放器所遇到的程序开发问题。如果觉得互联网集市技术教程内容还不错，欢迎将互联网集市网站推荐给程序员好友。

内容备注

版权声明：本文内容由互联网用户自发贡献，该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容，请发送邮件至 gblab@vip.qq.com 举报，一经查实，本站将立刻删除。

内容手机端

扫描二维码推送至手机访问。

本文链接：https://qyyshop.com/info/388949.html

来源：【匿名】

【上一篇】小强的HTML5移动开发之路（16）——神奇的拖放功能【下一篇】html5如何获取php数据

更多 ►

【小强的HTML5移动开发之路（5）——制作一个漂亮的视频播放器】教程文章相关的互联网学习教程文章

html5+css3学习笔记音频和视频【代码】

格式IEFirefoxOperaChromeSafariOggNo3.5+10.5+5.0+NoMPEG 49.0+NoNo5.0+3.0+WebMNo4.0+10.6+6.0+NoOgg = 带有 Theora 视频编码和 Vorbis 音频编码的 Ogg 文件MPEG4 = 带有 H.264 视频编码和 AAC 音频编码的 MPEG 4 文件WebM = 带有 VP8 视频编码和 Vorbis 音频编码的 WebM 文件 <video width="320" height="240" controls="controls"><source src="movie.ogg" type="video/ogg"><source src="movie.mp4" type="video/mp4"> Your b...

MiracleSnow网页设计HTML5+CSS3+JS全套视频教程

终于把这套课程讲完了，虽然时间隔了很长，但也算有始有终了，这是在YY讲课中我自己录的，讲了网页设计的基础，这也是我第一次给那么多人讲课，讲的不好多多包涵。前几次视频和课件是分开的，后几次都打包在一起了，由于第三章是教使用Dreamweaver，而我建议开始学的时候使用文本编辑器，因此就没讲这章，等学完基础，相信你们能够自己摸索Dreamweaver的使用。视频：第一、二章网页设计语言基础(1)：http://yun.baidu.com/s/1sjz2V...

HTML5 视频流行插件之video.js【代码】【图】

Video.js 是一个通用的在网页上嵌入视频播放器的 JS 库，Video.js 自动检测浏览器对 HTML5 的支持情况，如果不支持 HTML5 则自动使用 Flash 播放器。（要支持ie低版本请下载5.4.3版）点击进入官网下载地址：http://www.jq22.com/jquery-info404也可以使用cdn<link href="//cdn.bootcss.com/video.js/7.0.0-alpha.1/alt/video-js-cdn.css" rel="stylesheet"><script src="//cdn.bootcss.com/video.js/7.0.0-alpha.1/video.min.js"...

JS检测浏览器是否支持HTML5视频播放 (标签<video>) ,【代码】

function checkVideo() {if (!!document.createElement(‘video‘).canPlayType) {var vidTest = document.createElement("video");oggTest = vidTest.canPlayType(‘video/ogg; codecs="theora, vorbis"‘);if (!oggTest) {h264Test = vidTest.canPlayType(‘video/mp4; codecs="avc1.42E01E, mp4a.40.2"‘);if (!h264Test) {document.getElementById("checkVideoResult").innerHTML = "Sorry. No video support.";} else {if (h2...

如何让转换的视频支持HTML5在线播放【代码】

转换工具当然是ffmpeg了，那么如何让转换后的视频支持所有支持HTML5的浏览器在线播放？只需要如下命令行代码就行了：ffmpeg -i output.mpg -vcodec libx264 -acodec aac -vprofile slow -vprofile baseline output_video.mp4想要知道为什么要这么设置音视频编码么？参考：https://developer.mozilla.org/en-US/docs/Web/HTML/Supported_media_formats 原文：http://www.cnblogs.com/lohcve/p/4731608.html

初探html5---Video + DOM(视频播放)【代码】

1:HTML5 开发环境下 lang="en"2:<video width="320" height="240" controls="controls"> 其中 controls="controls" controls 属性供添加播放、暂停和音量控件。<div style="text-align:center"> <button onclick="bigen()">播放/暂停</button> <button onclick="big()">大</button> <button onclick="centre()">中</button> <button onclick="small()">小</button></br><video id="video1" width="420" style="margin-top;15...

基于Html5做音频和视频播放【图】

设置html5标签头<!DOCTYPE html><html lang="en">视频<video id="media" style="width: 100%;height:400px;" controls> <source src="${pageContext.request.contextPath}/file/video/${fileName}"></video> 音频<audio id="media" controls><source src="${pageContext.request.contextPath}/file/audio/${fileName}"/></audio> Js控制播放和暂停var media = $("#media"); if(media[0].paused) {media[0].play();}else {media[0]...

HTML5视频直播技术【代码】

分享内容简介：目前视频直播，尤其是移动端的视频直播已经火到不行了，基本上各大互联网公司都有了自己的直播产品，所以对于直播的一些基本知识和主要技术点也要有所了解，本次分享就向大家介绍一下其中的奥秘。内容大体框架:怎样利用 HTML5 来播放直播视频怎样录制直播视频怎样实时上传直播视频直播中的用户交互下面是本期分享内容整理Hello, 大家好，我是吕鸣，目前是在腾讯 SNG 的即通应用部负责手Q的兴趣部落 Web 前端开发工作...

HTML5_02之视频、音频、Canvas

1、HTML5新特性之视频播放——video： ①例：<video src=""></video> ②video标签默认为300*150的inline-block； ③成员属性： autoplay：是否自动播放； controls：是否显示播放控件； currentTime：当前播放到的时间； duration：总时长； defaultMuted：默认是否静音； loop：是否自动循环播放； muted：当前是否静音； paused：当前是否处于暂停状态； poster：""，在视频播放前的显示图片； volumn：当前播放音量；...

mac优酷视频看不了？苹果电脑Mac上优酷看HTML5视频教程介绍【图】

为了俺们的MacBook Air 和 Pro的使用寿命，小编一直舍不得拿它看电影和玩游戏，但是，如果生活中缺了游戏和视频总觉得少了点啥，不过最新小编发现一个新神器，Mac html5 插件可以让你完美将优酷和土豆的Flash视频转成HTML5播放，而且还可以免费看优酷和土豆的付费视频哦！哇咔咔，简直爽呆了。软件名称：Mac html5 插件 for mac V1.1 苹果电脑版软件大小：214KB更新时间：2014-07-24　　当然首先，童鞋们在本站脚本之家下载 Ma...

HTML5全屏背景视频与 CSS 和 JS（插件或库）【代码】

译文原链接：http://codetheory.in/html5-fullscreen-background-video/前言：当网页载入时，自动播放的全屏背景视频已经成为当前颇受欢迎的趋势。就个人而言，我认为自动播放、质量好的视频会增加用户/客户的参与度。应该记住，视频的故事必须与品牌相关。近年来，我们被FB和Twitter等社交网络上的大量视频所包围。据研究由此引起了用户更多的参与。最近我不得不在一个网站上实现相同的功能，因此我决定构建一个用到 HTML5 视...

HTML5视频支持检测(检查浏览器是否支持视频播放)

复制代码代码如下:<STRONG>现在越来越多的网站都提供视频播放（非插件）。HTML5 提供了展示视频的标准。那么如何检查你得浏览器是否支持视频播放呢，下面我们来写一个列子。</STRONG> 复制代码代码如下:<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <body> <h1>HTML 5 视频</h1> <p>检测您的浏览器是否支...

html5播放mp4视频代码

1.nginx支持flv和mp4格式播放默认yum安装nginxcentos7安装nginx时候应该是默认安装nginx_mod_h264_streaming模块的# nginx -V查看是否安装nginx_mod_h264_streaming模块nginx在新版本中已经支持了--with-http_mp4_module --with-http_flv_module这2个模块即可# vi /etc/nginx/nginx.confserver { listen 80 default_server; listen [::]:80 default_server; server_name _; root ...

[JavaScript] HTML5 播放hls流媒体视频流【代码】

在最新版的 Android webview 中不用任何插件，可以直接播放在windows10自带的Edge浏览器可直接播放，PC端 safari浏览器可直接播放PC端chrome，IE，Firefox以及集成以上内核的各种浏览器，以及旧版的Android SDK的webview 不能播放在不能播放的情况下，需要引入hls.js如下示例：<template><div class="camera-module"><div class="video-view"><video ref="video" id="video-rtmp" preload="auto" autoplay="autoplay" muted></vi...

HTML5 音频视频

HTML5 视频和音频的 DOM 参考手册HTML5 DOM 为 <audio> 和 <video> 元素提供了方法、属性和事件。这些方法、属性和事件允许您使用 JavaScript 来操作 <audio> 和 <video> 元素。HTML5 Audio/Video 方法方法描述addTextTrack()向音频/视频添加新的文本轨道canPlayType()检测浏览器是否能播放指定的音频/视频类型load()重新加载音频/视频元素play()开始播放音频/视频pause()暂停当前播放的音频/视频HTML5 Audio/Video 属性属性描述au...

首页 / HTML5 / 小强的HTML5移动开发之路（5）——制作一个漂亮的视频播放器

小强的HTML5移动开发之路（5）——制作一个漂亮的视频播放器

内容导读

内容图文

内容总结

内容备注

内容手机端

【小强的HTML5移动开发之路（5）——制作一个漂亮的视频播放器】教程文章相关的互联网学习教程文章

html5+css3学习笔记音频和视频【代码】

MiracleSnow网页设计HTML5+CSS3+JS全套视频教程

HTML5 视频流行插件之video.js【代码】【图】

JS检测浏览器是否支持HTML5视频播放 (标签<video>) ,【代码】

如何让转换的视频支持HTML5在线播放【代码】

初探html5---Video + DOM(视频播放)【代码】

基于Html5做音频和视频播放【图】

HTML5视频直播技术【代码】

HTML5_02之视频、音频、Canvas

mac优酷视频看不了？苹果电脑Mac上优酷看HTML5视频教程介绍【图】

HTML5全屏背景视频与 CSS 和 JS（插件或库）【代码】

HTML5视频支持检测(检查浏览器是否支持视频播放)

html5播放mp4视频代码

[JavaScript] HTML5 播放hls流媒体视频流【代码】

HTML5 音频视频

HTML5 - 相关标签

播放器 - 相关标签

开发 - 相关标签

HTML5 - 技术教程分类

HTML5 - 最新教程

HTML5 - 最热教程