Javascript實(shí)現(xiàn)視頻文件播放功能(示例詳解)
應(yīng)用CSS基礎(chǔ)和JavaScript的函數(shù)功能，制作一個(gè)視頻播放器。使用CSS完成相應(yīng)的布局樣式，利用JavaScript函數(shù)來監(jiān)聽進(jìn)度條，然后使用鼠標(biāo)點(diǎn)擊按鈕實(shí)現(xiàn)對(duì)視頻的播放。
CSS部分：
<style>
* {
margin: 0;
padding: 0;
}
.body{
height: 100%;
width: 100%;
background-image: url(風(fēng)景.jpg);
position: fixed;
}
figcaption {
text-align: center;
font-family: "Microsoft YaHei";
font-size: 24px;
font-weight: 700;
line-height: 150px;
}
.player {
width:640px;
height:360px;
margin: 10px auto;
background-color: pink;
background:url("login_on.gif")
top center no-repeat;
background-size: auto 100%;
position: relative;
border-radius: 10px;
overflow: hidden;
}
.player video {
height:100%;
display: block;
margin: 0px auto;
display: block;
}
.controls {
width: 620px;
height:40px;
background-color: black;
position: absolute;
left: 10px;
bottom: 10px;
border-radius: 10px;
}
.switch {
width: 20px;
height: 20px;
position: absolute;
top:10px;
left: 10px;
display: block;
text-align: center;
line-height: 20px;
color: yellow;
}
.progerss {
width: 400px;
height:10px;
position: absolute;
background-color:beige;
left: 40px;
top:15px;
border-radius: 4px;
overflow: hidden;
}
.cur-progress {
width:0%;
height:100%;
background: yellow;
}
.time {
width: 120px;
height: 20px;
text-align: center;
line-height: 20px;
position: absolute;
left: 450px;
top:10px;
font-size: 12px;
color: #fff;
}
.exted {
width: 20px;
height: 20px;
position: absolute;
top:10px;
right: 10px;
text-align: center;
line-height: 20px;
color: yellow;
}
</style>
<style>
* {
margin: 0;
padding: 0;
}
.body{
height: 100%;
width: 100%;
background-image: url(風(fēng)景.jpg);
position: fixed;
}
figcaption {
text-align: center;
font-family: "Microsoft YaHei";
font-size: 24px;
font-weight: 700;
line-height: 150px;
}
.player {
width:640px;
height:360px;
margin: 10px auto;
background-color: pink;
background:url("login_on.gif")
top center no-repeat;
background-size: auto 100%;
position: relative;
border-radius: 10px;
overflow: hidden;
}
.player video {
height:100%;
display: block;
margin: 0px auto;
display: block;
}
.controls {
width: 620px;
height:40px;
background-color: black;
position: absolute;
left: 10px;
bottom: 10px;
border-radius: 10px;
}
.switch {
width: 20px;
height: 20px;
position: absolute;
top:10px;
left: 10px;
display: block;
text-align: center;
line-height: 20px;
color: yellow;
}
.progerss {
width: 400px;
height:10px;
position: absolute;
background-color:beige;
left: 40px;
top:15px;
border-radius: 4px;
overflow: hidden;
}
.cur-progress {
width:0%;
height:100%;
background: yellow;
}
.time {
width: 120px;
height: 20px;
text-align: center;
line-height: 20px;
position: absolute;
left: 450px;
top:10px;
font-size: 12px;
color: #fff;
}
.exted {
width: 20px;
height: 20px;
position: absolute;
top:10px;
right: 10px;
text-align: center;
line-height: 20px;
color: yellow;
}
</style>HTML部分：
<body class="body">
<figure>
<figcaption>視頻播放</figcaption>
<div class="player">
<video src="商丘古城--夜景.mp4"></video>
<div class="controls">
<a href="#" rel="external nofollow" rel="external nofollow" class="switch icon-play" title="播放"></a>
<div class="progerss">
<div class="cur-progress"></div>
</div>
<div class="time">
<span class="curr-time">00:00:00</span>/
<span class="total-time">00:00:00</span>
</div>
<a href="#" rel="external nofollow" rel="external nofollow" class="exted icon-fullscreen" title="全屏"></a>
</div>
</div>
</figure>
</body>Javascript部分：
<script>
var video = document.querySelector("video")
var playBtn = document.querySelector(".switch");
var crrProgress = document.querySelector(".cur-progress");
var crrTime = document.querySelector(".curr-time");
var totalTime = document.querySelector(".total-time");
var exted = document.querySelector(".exted");
var tTime;
var cTime;
playBtn.onclick = function () {
if(video.paused){
video.play();
this.classList.remove("icon-play");
this.classList.add("icon-pause");
playBtn.title = "暫停";
}else{
video.pause();
this.classList.remove("icon-pause");
this.classList.add("icon-play");
playBtn.title = "播放";
}
}
video.oncanplay = function () {
tTime = video.duration;
var h = Math.floor(tTime / 3600);
var m = Math.floor(tTime % 3600 / 60);
var s = Math.floor(tTime % 60);
h = h >= 10 ? h :"0" + h;
m = m >= 10 ? m :"0" + m;
s = s >= 10 ? s :"0" + s;
totalTime.innerHTML = h + ":" + m + ":" + s;
}
video.ontimeupdate = function () {
cTime = video.currentTime;
var h = Math.floor(cTime / 3600);
var m = Math.floor(cTime % 3600 / 60);
var s = Math.floor(cTime % 60);
h = h >= 10 ? h :"0" + h;
m = m >= 10 ? m :"0" + m;
s = s >= 10 ? s :"0" + s;
crrTime.innerHTML = h + ":" + m + ":" + s;
var value = cTime / tTime;
crrProgress.style.width = value * 100 + "%";
}
exted.onclick = function () {
video.webkitRequestFullScreen();
}
</script>效果圖：
JavaScript介紹：
JavaScript（簡(jiǎn)稱“JS”） 是一種具有函數(shù)優(yōu)先的輕量級(jí)，解釋型或即時(shí)編譯型的編程語言。雖然它是作為開發(fā)Web頁(yè)面的腳本語言而出名，但是它也被用到了很多非瀏覽器環(huán)境中，JavaScript 基于原型編程、多范式的動(dòng)態(tài)腳本語言，并且支持面向?qū)ο蟆⒚钍?、聲明式、函?shù)式編程范式。
JavaScript在1995年由Netscape公司的Brendan Eich，在網(wǎng)景導(dǎo)航者瀏覽器上首次設(shè)計(jì)實(shí)現(xiàn)而成。因?yàn)镹etscape與Sun合作，Netscape管理層希望它外觀看起來像Java，因此取名為JavaScript。但實(shí)際上它的語法風(fēng)格與Self及Scheme較為接近。
JavaScript的標(biāo)準(zhǔn)是ECMAScript 。截至 2012 年，所有瀏覽器都完整的支持ECMAScript 5.1，舊版本的瀏覽器至少支持ECMAScript 3 標(biāo)準(zhǔn)。2015年6月17日，ECMA國(guó)際組織發(fā)布了ECMAScript的第六版，該版本正式名稱為 ECMAScript 2015，但通常被稱為ECMAScript 6 或者ES2015。
JavaScript腳本語言具有以下特點(diǎn):
（1）腳本語言。JavaScript是一種解釋型的腳本語言，C、C++等語言先編譯后執(zhí)行，而JavaScript是在程序的運(yùn)行過程中逐行進(jìn)行解釋。
（2）基于對(duì)象。JavaScript是一種基于對(duì)象的腳本語言，它不僅可以創(chuàng)建對(duì)象，也能使用現(xiàn)有的對(duì)象。
（3）簡(jiǎn)單。JavaScript語言中采用的是弱類型的變量類型，對(duì)使用的數(shù)據(jù)類型未做出嚴(yán)格的要求，是基于Java基本語句和控制的腳本語言，其設(shè)計(jì)簡(jiǎn)單緊湊。
（4）動(dòng)態(tài)性。JavaScript是一種采用事件驅(qū)動(dòng)的腳本語言，它不需要經(jīng)過Web服務(wù)器就可以對(duì)用戶的輸入做出響應(yīng)。在訪問一個(gè)網(wǎng)頁(yè)時(shí)，鼠標(biāo)在網(wǎng)頁(yè)中進(jìn)行鼠標(biāo)點(diǎn)擊或上下移、窗口移動(dòng)等操作JavaScript都可直接對(duì)這些事件給出相應(yīng)的響應(yīng)。
（5）跨平臺(tái)性。JavaScript腳本語言不依賴于操作系統(tǒng)，僅需要瀏覽器的支持。因此一個(gè)JavaScript腳本在編寫后可以帶到任意機(jī)器上使用，前提是機(jī)器上的瀏覽器支 持JavaScript腳本語言，JavaScript已被大多數(shù)的瀏覽器所支持。 不同于服務(wù)器端腳本語言，例如PHP與ASP，JavaScript主要被作為客戶端腳本語言在用戶的瀏覽器上運(yùn)行，不需要服務(wù)器的支持。所以在早期程序員比較傾向于使用JavaScript以減少對(duì)服務(wù)器的負(fù)擔(dān)，而與此同時(shí)也帶來另一個(gè)問題，安全性。
到此這篇關(guān)于Javascript實(shí)現(xiàn)視頻文件播放功能的文章就介紹到這了,更多相關(guān)js視頻文件播放內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！
- vue3使用videojs播放m3u8格式視頻教程
- vue+video.js實(shí)現(xiàn)視頻播放列表
- DPlayer.js視頻播放插件使用方法
- JS實(shí)現(xiàn)簡(jiǎn)單控制視頻播放倍速的實(shí)例代碼
- 如何在vue中使用video.js播放m3u8格式的視頻
- Js視頻播放器插件Video.js使用方法詳解
- vue使用video.js進(jìn)行視頻播放功能
- vue + typescript + video.js實(shí)現(xiàn) 流媒體播放 視頻監(jiān)控功能
- video.js 一個(gè)頁(yè)面同時(shí)播放多個(gè)視頻的實(shí)例代碼
相關(guān)文章
uniapp實(shí)現(xiàn)滑動(dòng)評(píng)分效果
這篇文章主要為大家詳細(xì)介紹了uniapp實(shí)現(xiàn)滑動(dòng)評(píng)分效果，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2021-09-09
這篇文章主要介紹了JS實(shí)現(xiàn)的貪吃蛇游戲,結(jié)合具體案例形式分析了javascript實(shí)現(xiàn)貪吃蛇的相關(guān)步驟、原理、算法操作技巧與相關(guān)注意事項(xiàng),需要的朋友可以參考下2019-05-05
微信小程序scroll-view隱藏滾動(dòng)條的方法詳解
這篇文章主要介紹了微信小程序scroll-view隱藏滾動(dòng)條的方法，本文通過實(shí)例代碼給大家介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值,需要的朋友可以參考下2020-03-03
js實(shí)現(xiàn)無刷新監(jiān)聽URL的變化示例代碼詳解
這篇文章主要介紹了js如何無刷新監(jiān)聽URL的變化,本文通過實(shí)例代碼給大家介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值，需要的朋友可以參考下2020-06-06
原生JS利用transform實(shí)現(xiàn)banner的無限滾動(dòng)示例代碼
這篇文章主要介紹了原生JS利用transform實(shí)現(xiàn)banner的無限滾動(dòng)示例代碼，文中通過示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2020-06-06
JS實(shí)現(xiàn)網(wǎng)頁(yè)滾動(dòng)條感應(yīng)鼠標(biāo)變色的方法
這篇文章主要介紹了JS實(shí)現(xiàn)網(wǎng)頁(yè)滾動(dòng)條感應(yīng)鼠標(biāo)變色的方法,實(shí)例分析了javascript針對(duì)鼠標(biāo)事件的操作技巧,具有一定參考借鑒價(jià)值,需要的朋友可以參考下2015-02-02
js實(shí)現(xiàn)簡(jiǎn)單鼠標(biāo)跟隨效果的方法
這篇文章主要介紹了js實(shí)現(xiàn)簡(jiǎn)單鼠標(biāo)跟隨效果的方法,涉及javascript鼠標(biāo)事件與坐標(biāo)獲取等相關(guān)技巧,非常具有實(shí)用價(jià)值,需要的朋友可以參考下2015-04-04
JavaScript計(jì)算字符串中每個(gè)字符出現(xiàn)次數(shù)的小例子
這篇文章介紹了在JS中計(jì)算字符串中每個(gè)字符出現(xiàn)的次數(shù)，有需要的朋友可以參考一下2013-07-07
js刪除對(duì)象/數(shù)組中null、undefined、空對(duì)象及空數(shù)組方法示例
這篇文章主要給大家介紹了關(guān)于js刪除對(duì)象/數(shù)組中null、undefined、空對(duì)象及空數(shù)組的相關(guān)資料，文中通過示例代碼介紹的非常詳細(xì)，需要的朋友可以參考借鑒，下面隨著小編一起來看看吧2018-11-11
這篇文章主要為大家詳細(xì)介紹了JavaScript實(shí)現(xiàn)更換頭像功能，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2021-08-08