2. 程式人生 > >用html5新增的js媒體 API手寫的一個視訊播放器

用html5新增的js媒體 API手寫的一個視訊播放器

阿新 • • 發佈：2019-01-21
var oVid = document.getElementsByClassName("player")[0]; var oVideo = oVid.children[0]; //拿到video var oCtl = oVid.children[1] var oUl = oCtl.children; //拿到所有li var oUlWidth = parseInt(oUl[2].offsetWidth)-2; var maxTime; var thisTime; var
oSp = oUl[2].children[0]; console.log(parseInt(oUl[3].style.left)); var oLeft = parseInt(oUl[2].offsetLeft)+parseInt(oVid.offsetLeft)+parseInt(oCtl.offsetLeft); var oSchSp = parseInt(oVid.offsetLeft); oUl[0].onclick = function(){ if(oVideo.paused){ oVideo.play(); oUl[0
].innerHTML = "暫停"; oVid.onmouseover = function(){ oCtl.style.opacity=0.8; } oVid.onmouseout = function(){ oCtl.style.opacity=0; } }else{ oVideo.pause(); oUl[0
].innerHTML = "播放"; oVid.onmouseover=null; oVid.onmouseout =null; } } var oDateOvideo = function(time){ time = ""+time; time = time.length<2?0+time:time; return time; } oVideo.onloadedmetadata = function(){ maxTime = oVideo.duration; var h = oDateOvideo(Math.floor(maxTime/3600)); //時 var m = oDateOvideo(Math.floor(maxTime%3600/60)); //分 var s = oDateOvideo(Math.floor(maxTime%3600%60)); //秒 oUl[4].innerHTML = h+":"+m+":"+s; } function date(){ thisTime = oVideo.currentTime; var h = oDateOvideo(Math.floor(thisTime/3600)); //時 var m = oDateOvideo(Math.floor(thisTime%3600/60)); //分 var s = oDateOvideo(Math.floor(thisTime%3600%60)); //秒 oUl[1].innerHTML = h+":"+m+":"+s; var t = (thisTime/maxTime); //console.log(oUl[2].children[0].width); oSp.style.width = parseInt(oUlWidth-2) * t.toFixed(2)+"px"; oUl[3].style.left = 215+parseInt( oSp.style.width ) +"px"; } oVideo.ontimeupdate = date; oUl[5].onclick = function(){ if(oVideo.muted){ oVideo.muted=false; oUl[5].innerHTML = "靜音"; }else{ oVideo.muted=true; oUl[5].innerHTML = "聲音"; } } var move = function(ev){ ev = ev || window.event; var _X = ev.clientX; //oUl[3].style.left = parseInt(_X) - oSchSp; //var strae = parseInt(oUl[3].style.left); oVideo.ontimeupdate = null; //console.log(_X-oLeft); var t = _X-oLeft; oVideo.currentTime = parseInt(maxTime * (t/oUlWidth).toFixed(2)); //console.log(parseInt(oUl[3].style.left)); oSp.style.width = oUlWidth * (t/oUlWidth).toFixed(2)+"px"; oUl[3].style.left = _X - oSchSp-15 +"px"; document.onmousemove = function(ev){ ev = ev || window.event; var _x = ev.clientX; var xChange = parseInt(_x)-parseInt(_X); //oUl[3].style.left = xChange + _X - oSchSp - 15 +"px"; var t = _x - oLeft; console.log(oVideo.currentTime); oVideo.currentTime = parseInt(maxTime * (t/oUlWidth).toFixed(2)); oSp.style.width = oUlWidth * (t/oUlWidth).toFixed(2)+"px"; if ((_x - oSchSp-15)<200) { oUl[3].style.left = 200+"px"; } else if ((_x - oSchSp-15)>600) { oUl[3].style.left = 600+"px"; } else{ oUl[3].style.left = _x - oSchSp-15+"px"; } //console.log(parseInt(_x)-parseInt(_X)); date(); } document.onmouseup = function(){ //oUl[2].onmousedown = null; document.onmousemove = null; oVideo.ontimeupdate = date; //alert(oSp.onmousemove); } } oUl[2].onmousedown = move; oUl[3].onmousedown = move; oUl[8].onclick = function(){ //oVideo.webkitRequestFullScreen(); if(oVideo.requestFullScreen) { oVideo.requestFullScreen(); } else if(oVideo.mozRequestFullScreen) { oVideo.mozRequestFullScreen(); } else if(oVideo.webkitRequestFullScreen) { oVideo.webkitRequestFullScreen(); } } /* video和audio屬性： Autoplay 視訊就緒自動播放 controls 向用戶顯示播放控制元件 Width 設定播放器寬度 //audio沒有 Height 設定播放器高度 //audio沒有 Loop 播放完是否繼續播放該視訊，迴圈播放 Preload 屬性描述了在頁面載入後是否預載入音視訊; 如果設定了 autoplay 屬性，則忽略該屬性; 屬性值： none:不執行預載入也不執行元資料 mete:載入元資料(不加預載視訊，但要獲取視訊時長等等屬性) auto:預設值（預載入或緩衝） Src 視訊url地址 Poster 載入等待的畫面圖片 Video API方法 play() pause() load() 全屏: webkit element.webkitRequestFullScreen(); Firefox element.mozRequestFullScreen(); W3C element.requestFullscreen(); 退出全屏： webkit document.webkitCancelFullScreen(); Firefox document.mozCancelFullScreen(); W3C document.exitFullscreen(); Video API屬性 currentTime : 開始到播放現在所用的時間 duration : 媒體總時間(只讀) volume : 0.0-1.0的音量相對值 muted : 是否靜音 false /true paused : 媒體是否暫停(只讀) ended : 媒體是否播放完畢(只讀) error : 媒體發生錯誤的時候，返回錯誤程式碼 (只讀) currentSrc : 以字串的形式返回媒體地址(只讀) loadstart progress suspend emptied stalled play pause loadedmetadata loadeddata waiting playing canplay canplaythrough seeking seeked timeupdate ended ratechange durationchange volumechange HTML5支援的音訊格式： Ogg 免費 支援的瀏覽器:C、F、O MP3 收費 支援的瀏覽器: I、C、S Wav 收費 支援的瀏覽器: F、O、S audio 屬性 autoplay 自動播放 controls 向用戶顯示播放控制元件 loop 迴圈 preload 是否等載入完再播放 src 要播放的音訊的 URL。 */

相關推薦

用html5新增的js媒體 API手寫的一個視訊播放器

var oVid = document.getElementsByClassName("player")[0]; var oVideo = oVid.children[0]; //拿到video var oCtl = oVid.children[1]

基於 OpenCL 的 API 自己寫一個編解碼器

這的難度非常大，首先你需要對於 OpenCL API 非常的熟悉，其次你需要對於編解碼 的知識瞭解的非常透徹。這兩個問題的任何一個都有非常大的難度。 摘自http://blog.guorongfei.com/2015/10/07/gpgpu/

用Cocos2d-x和libvlc寫一個跨平臺播放器

#include "MoviePlayer.h" #include "CCDirector.h" NS_CC_BEGIN MoviePlayer * MoviePlayer::_instance = 0; static char * videobuf = 0; static void *lock(vo

從零開始學習PYTHON3講義（十四）寫一個mp3播放器

《從零開始PYTHON3》第十四講 通常來說，Python解釋執行，執行速度慢，並不適合完整的開發遊戲。隨著電腦速度的快速提高，這種情況有所好轉，但開發遊戲仍然不是Python的重點工作。 大多應用是利用Python開發效率高的特點，進行遊戲原型驗證，或者在大的遊戲系統中，使用Python進行地圖、場

從零開始學習python，寫一個mp3播放器！

從零開始學習python，寫一個mp3播放器！ 《從零開始PYTHON3》第十四講 通常來說，Python解釋執行，執行速度慢，並不適合完整的開發遊戲。隨著電腦速度的快速提高，這種情況有所好轉，但開發遊戲仍然不是Python的重點工作。 從零開始學習python，寫一個mp3播放器

Qt呼叫VLC寫的視訊播放器原始碼

最近因為工作需要，做了個視訊播放器，能播放目前絕大多數格式，也能播放流媒體檔案，介面是用Qt做的，這個專案能在mac linux windows等平臺編譯執行，採用的是C++語言和C++的GUI庫Qt呼叫開源專案VLC提供出來的SDK，VLC是一個開源的視訊播放器，比較牛，沒聽過的朋友可以百度一下。 先上效

LeanCloud SDK不好用，Python手寫一個ORM

Intro 慣例，感覺寫了好用的東西就來寫個部落格吹吹牛逼。 LeanCloud Storage 的資料模型不像是一般的 RDBMS，但有時候又很刻意地貼近那種感覺，所以用起來就很麻煩。 LeanCloud SDK 的缺陷 不管別人認不認可，這些問題在使用中我是體會到不爽了。 資

HTML5新增-----JS-上傳檔案之文字

<!DOCTYPE html> <html>     <head>         <meta charset="utf-8" />         <title></title>         <

Tensorflow1.8用keras實現MNIST資料集手寫字型識別例程

import tensorflow as tf tf.enable_eager_execution() eager是新版本加入的動態圖，可以直接計算出結果而不用使用Session。同時也支援微分操作。 class DataLoader(): def __init_

Tensorflow1.8用keras實現MNIST資料集手寫字型識別例程（二）

class CNN(tf.keras.Model): def __init__(self): super().__init__() self.conv1 = tf.keras.layers.Conv2D( f

用keras訓練mnist資料集手寫識別

%matplotlib inline import pickle import os import keras, theano from keras.models import Sequential from keras.layers import Dense, Dropout, Flatten # ker

webAPP專案基礎知識介紹用html5+css3+js開發

最近關於webAPP很火，差不多很多公司開始製作自己的webAPP啦。一談到webAPP，大家就會想到用html5+CSS+js來實現。到底如何來製作？25學堂小編還沒有找到比較合適的用html5+css3開發webAPP專案教材。 這裡分享了一個《網易微博Web Ap

用BP人工神經網路識別手寫數字——《Python也可以》之三

這是我讀工程碩士的時候完成課程作業時做的，放在 dropbox 的角落中生塵已經有若干年頭了，最近 @shugelee 同學突然來了興致搞驗證碼識別，問到我的時候我記起自己做過一點點東西，特發上來給他參考，並趁機補充了一下《Python也可以》系列。影象預處理使用下圖（後方稱

手寫一個節點大小平衡樹（SBT）模板，留著用

看了一下午，感覺有了些瞭解，應該沒有錯，有錯希望斧正，感謝 #include<stdio.h> #include<string.h> struct s { int key,left,right,size; }tree[10010]; int to

手寫一個輕量級的閘道器API

以HTTP介面形式的應用,是目前大部分中小型企業最常見的微服務誇語言互動的實現方式 即:定義多個介面,外部呼叫,經閘道器解析進行分發，小編遇到的這種情況是，有多個服務，每個服務都需要單獨

來，我們手寫一個簡易版的mock.js吧（模擬fetch && Ajax請求）

預期的mock的使用方式 首先我們從使用的角度出發，思考編碼過程 M1. 通過配置檔案配置url和response M2. 自動檢測環境為開發環境時啟動Mock.js M3. mock程式碼能直接覆蓋global.fetch方法或者XMLHttpR

手寫一個React-Redux，玩轉React的Context API

[上一篇文章我們手寫了一個Redux](https://juejin.im/post/5efec81be51d4534942dd589)，但是單純的Redux只是一個狀態機，是沒有UI呈現的，所以一般我們使用的時候都會配合一個UI庫，比如在React中使用Redux就會用到`React-Redux`這個庫。這

手寫一個webpack，看看AST怎麼用

本文開始我會圍繞`webpack`和`babel`寫一系列的工程化文章，這兩個工具我雖然天天用，但是對他們的原理理解的其實不是很深入，寫這些文章的過程其實也是我深入學習的過程。由於`webpack`和`babel`的體系太大，知識點眾多，不可能一篇文章囊括所有知識點，目前我的計劃是從簡單入手，先實現一個最簡單

用javascript和html5做一個音樂播放器，附帶源碼

功能 優化 str 自由 所有 音樂app 作者 弧形 ner 效果圖： 實現的功能 1、首頁 2、底部播放控件 3、播放頁面 4、播放列表 5、排行榜 6、音樂搜索 輸入搜索關鍵詞，點擊放大鏡圖標 7、側邊欄 目錄結構 開發心得與總結 1、輪播圖 首

爬蟲入門 手寫一個Java爬蟲

fun sts 重試 功能 bool 內核 ftw private 查找 本文內容 淶源於 羅剛 老師的 書籍 << 自己動手寫網絡爬蟲一書 >> ; 本文將介紹 1: 網絡爬蟲的是做什麽的? 2: 手動寫一個簡單的網絡爬蟲; 1: 網絡爬蟲是做