html5 video综合示例-网页编程网

当前位置：主页 >> html5 >> 正文

html5 video综合示例

阅读：4827 输入：2014-05-06 10:07:54

<!DOCTYPE html>
<html>
    <head>
        <title>html5 视频标签学习</title>
        <meta http-equiv="Content-Type" content="text/html;charset=utf-8;">
    </head>
    <body>
        
        <header>
            <h1>自定义视频播放器</h1>
            <div >
                当前播放 ：《<span id="currentMovie">movie1</span>》<br>
                当前播放速度 ： <span id="currentSpeed">1X</span><br>
                当前声音大小为 ：<span id="currentVolume">100</span><br>
            </div>
        </header>
        <section>
        <article>
            <video style="float:left;" id="testVideo" preload="metadata" src="http://localhost/1.mp4" height="300"  controls>
                你的浏览器不支持html5视频
            </video>
            <div style="float:left;margin-left:10px;">
                <h3>播放列表</h3>
                <ul>
                    <li><a>movie1</a></li>
                    <li><a>movie2</a></li>
                    <li><a>movie3</a></li>
                    <li><a>movie4</a></li>
                </ul>
            </div>
        </article>
        <article style="clear:both;">
            <br/>
            <button id="play">播放</button>
            <button id="pause">暂停</button>
            <button id="stop">停止</button>
            <button id="prev">前一个</button>
            <button id="next">后一个</button>
            <button id="upVolume">音量+</button>
            <button id="downVolume">音量-</button>
            <button id="fastFoward">快进</button>
            <button id="fastBackward">快退</button>
            <br/>
            从<input type="text" id="min" style="width:20px;" value="0"/>分跳转到<input type="text" id="sec"  style="width:20px;" value="0"/>播放 
            <button id="locate">确认</button>
        </article>
        <section>
        <script type="text/javascript">
            var $  = function(id){return document.getElementById(id);};
            var _video = $("testVideo");
            
            //视频列表
　　　　　　　var playList = {
                current : 0,
                list : ["http://localhost/1.mp4","war3.ogg","movie.ogv","trailer.webm","trailer.ogv"]
            }
            
            var videoUtil = {
                //播放
                play : function(){
                    _video.play();
                },
                //暂停
                pause : function(){
                    _video.pause();
                },
                //停止
                stop : function(){
                    _video.currentTime = 0;
                    _video.pause();
                },
                //下一个视频
                next : function(){
                    if(playList.current == playList.list.length-1){
                        playList.current = 0;
                    }else{
                        playList.current++;
                    }
                    _video.src=playList.list[playList.current];
                    _video.play();
                },
                //前一个视频
                prev : function(){
                    if(playList.current == 0){
                        playList.current = palyList.list.length-1;
                    }else{
                        playList.current--;
                    }
                    _video.src=playList.list[playList.current];
                    _video.play();
                },
                //加大声音,每次加大1/10
                upVolume : function(){
                    _video.volume += 0.1;
                },
                //减小声音，每次减小1/10
                downVolume : function(){
                    _video.volume -= 0.1;
                },
                //翻倍加快播放速度
                fastFoward : function(){
                    //FF不支持playbackRate
　　　　　　　　　　　　if(_video.playbackRate){
                        _video.playbackRate = _video.playbackRate*2;
                    }else{
                        alert("对不起，你的浏览器不支持改变播放速度！");
                    }
                    
                },
                //降低播放速度
                fastBackward : function(){
                    if(_video.playbackRate){
                        _video.playbackRate = _video.playbackRate/2;
                    }else{
                        alert("对不起，你的浏览器不支持改变播放速度！");
                    }
                },
                //跳转到指定时间点播放
                locate : function(){
                    var min = $("min").value;
                    var sec = $("sec").value;
                    var time = parseInt(min)*60+parseInt(sec);
                    _video.currentTime = time;
                    _video.play();
                },
                bindEvent : function(){
                    var self = this;
                    
                    //绑定页面上各个按钮的事件
　　　　　　　　　　　　var btns = document.getElementsByTagName("button");
                    for(var i = 0 ;i < btns.length ; i++){
                        var el = btns[i];
                        el.onclick = self[el.id];
                    }
                    
                    //播放完毕自动播放下一个
                    _video.onended = function(){
                         var event = document.createEvent("HTMLEvents");
                        event.initEvent('click', true, true);
                        $("next").dispatchEvent(event);
                    }
                    
                    //循环检查视频的当前状态
                    setInterval(function(){
                        var speed = _video.playbackRate||1;
                        var movie = "movie"+playList.current;
                        var volume = parseInt(_video.volume*100);
                        $("currentMovie").innerHTML = movie;
                        $("currentSpeed").innerHTML = speed+"X";
                        $("currentVolume").innerHTML = volume;
                    },200);
                    
                }
            };
            
            window.onload = function(){
                videoUtil.bindEvent();
            }
            
        </script>
    </body>
</html>

上一篇：HTTP头部信息解释分析(淘宝内部笔记)
下一篇：HTTP返回码大全（中英解释）

相关阅读: html5 audio同步显示词歌; 关于动态生成的mp3在audio标签无法拖动的问题; html5中audio实现播放列表和自动播放