一個有趣的html5播放器
阿新 • • 發佈：2019-02-01
<span style="font-size:14px;"><strong><!DOCTYPE html> <html> <head> <meta charset="utf-8"/> <title>html5 視訊</title> </head> <style type="text/css"> li{list-style:none;color:#fff;} a:hover{color:#f00;} li:hover{color:#f00;cursor: pointer;} </style> <body > <div style="background-color:#fff;width:1000px;height:600px;"> <div style="margin-left:20%;"> <header> <div> 當前播放 ：<a > <!-- id="currentMovie" -->《畫江湖之靈主》</a><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="/jiami/images/1.mp4" height="300" controls> 你的瀏覽器不支援html5視訊 </video> <div style="float:left;background-color:rgb(48,48,48);width:200px;height:317px;overflow:scroll;"> <h4 style="color:rgb(166,166,166);font-weight:bold;width:200px;float:left;"><span>播放列表</span> <span >集數列表</span></h4> <hr> <ul style=""> <li>喜洋洋灰太狼</li> <li>蠟筆小新</li> <li>龍珠</li> <li>喜洋洋灰太狼</li> <li>蠟筆小新</li> </ul> </div> </article> <article style="clear:both;"> <br/> <button class="btn btn-primary" id="play">播放</button> <button class="btn btn-primary" id="pause">暫停</button> <button class="btn btn-primary" id="stop">停止</button> <button class="btn btn-primary" id="prev">下集</button> <button class="btn btn-primary" id="next">上集</button> <button class="btn btn-primary" id="upVolume">音量+</button> <button class="btn btn-primary" id="downVolume">音量-</button> <button class="btn btn-primary" id="fastFoward">快進</button> <button class="btn btn-primary" 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> </div> </div> <script type="text/javascript"> var $ = function(id){return document.getElementById(id);}; var _video = $("testVideo"); //視訊列表 var playList = { current : 0, list : ["畫江湖之靈主.ogg","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></strong></span>