快捷導(dǎo)航

一個(gè)html5播放視頻的video控件只支持android的默認(rèn)格式mp4和3gp

更新時(shí)間：2014年05月08日 11:12:37 作者：

寫(xiě)了個(gè)html5播放視頻的video控件，只支持mp4和3gp(android和ios默認(rèn)支持的格式就寫(xiě)了這個(gè)) ,需要的朋友可以參考下

 
<!DOCTYPE html> 
<html xmlns="http://www.w3.org/1999/xhtml"> 
<head> 
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 
<title></title> 
</head> 
<body> 

<div id="divVideo"></div> 

//因js水平有限，不喜勿噴，全當(dāng)沒(méi)事看看,video是html5中的新控件，大家可以看看 

<script type="text/javascript"> 

//mp4是ios、android普遍支持的格式 
function playVideo(opt) { 
if (typeof (opt) == "undefined") { 
alert("請(qǐng)傳入必要參數(shù)！"); 
return; 
} 
if (typeof (opt.elemt) == "undefined") { 
alert("請(qǐng)指定播放器要插入的對(duì)象！"); 
return; 
} 
if (typeof (opt.src) == "undefined") { 
alert("請(qǐng)指定要播放視頻的路徑！"); 
return; 
} 
var _this = this; 
_this.elemt = opt.elemt; //播放器要插入的對(duì)象 
_this.src = opt.src; //視頻的URL(必設(shè)) 
_this.width = opt.width > 0 ? opt.width + "px" : "100%"; //寬度(默認(rèn)100%) 
_this.height = opt.height > 0 ? opt.height + "px" : "100%"; //高度(默認(rèn)100%) 
_this.autoplay = opt.autoplay == "true" ? "autoplay" : ""; //自動(dòng)播放（true為自動(dòng)播放） 
_this.poster = opt.poster; //視頻封面，播放時(shí)的封面圖片 
_this.preload = opt.preload == "true" ? "preload" : ""; //預(yù)加載(true時(shí)啟動(dòng)加載) 
_this.loop = opt.loop == "true" ? "loop" : ""; //循環(huán)播放(true時(shí)循環(huán)播放) 
var str = "<video id='playVideo' controls "; //根據(jù)設(shè)置的屬性的值，拼寫(xiě)video控件 
str += " width='" + _this.width + "' height='" + _this.height + "' " + _this.autoplay + " " + _this.preload + " " + _this.loop + " "; 
if (typeof (_this.poster) != "undefined") { 
str += " poster='" + _this.poster + "' >"; 
} else { 
str += " > "; 
} 
str += " <source src='" + _this.src + "' />"; 
str += "</video>"; 
this.elemt.innerHTML = str; //將str放到要插入的對(duì)象中 
} 
playVideo({ 
//所有參數(shù)，elemt和src為必填其他看需求怎么要求 
//elemt為播放控件要插入的容器，src為視頻文件地址，preload為預(yù)加載，autoplay是否頁(yè)面進(jìn)入就自動(dòng)播放 
//poster為播放前的遮照?qǐng)D片，loop為是否循環(huán)播放，width和heigth默認(rèn)100% 
elemt: document.getElementById("divVideo"), 
src: "3.mp4", 
preload: "true", 
autoplay: "true", 
poster: "", 
loop: "true", 
width: "", 
heigth:"" 
}); 
</script> 
</body> 
</html> 

您可能感興趣的文章:

相關(guān)文章

js對(duì)象轉(zhuǎn)json數(shù)組的簡(jiǎn)單實(shí)現(xiàn)案例
本篇文章主要是對(duì)js對(duì)象轉(zhuǎn)json數(shù)組的簡(jiǎn)單實(shí)現(xiàn)案例進(jìn)行了介紹，需要的朋友可以過(guò)來(lái)參考下，希望對(duì)大家有所幫助
2014-02-02
JavaScript設(shè)計(jì)模式之工廠模式和構(gòu)造器模式
這篇文章主要介紹了JavaScript設(shè)計(jì)模式之工廠模式和構(gòu)造器模式,本文同時(shí)講解了設(shè)計(jì)模式的類(lèi)別如創(chuàng)建型設(shè)計(jì)模式、結(jié)構(gòu)型設(shè)計(jì)模式、行為設(shè)計(jì)模式等內(nèi)容,需要的朋友可以參考下
2015-02-02
JS中正則表達(dá)式只有3種匹配模式(沒(méi)有單行模式)詳解
下面小編就為大家?guī)?lái)一篇JS中正則表達(dá)式只有3種匹配模式(沒(méi)有單行模式)詳解。小編覺(jué)得挺不錯(cuò)的，現(xiàn)在就分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧
2016-07-07
JavaScript創(chuàng)建對(duì)象的七種經(jīng)典方式分享
JavaScript 創(chuàng)建對(duì)象的方式有很多，通過(guò) Object 構(gòu)造函數(shù)或?qū)ο笞置媪康姆绞揭部梢詣?chuàng)建單個(gè)對(duì)象，顯然這兩種方式會(huì)產(chǎn)生大量的重復(fù)代碼，并不適合量產(chǎn)。本文介紹了七種非常經(jīng)典的創(chuàng)建對(duì)象的方式，希望對(duì)大家有所幫助
2022-11-11
純JS實(shí)現(xiàn)五子棋游戲
這篇文章主要為大家詳細(xì)介紹了純JS實(shí)現(xiàn)五子棋游戲，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下
2020-05-05
web3.js增加eth.getRawTransactionByHash(txhash)方法步驟
這篇文章主要介紹了web3.js增加eth.getRawTransactionByHash(txhash)方法步驟,需要的朋友可以參考下
2018-03-03
一步步教會(huì)你微信小程序的登錄鑒權(quán)
登錄功能是許多小程序必備的一個(gè)功能，通過(guò)登錄系統(tǒng)，我們可以記錄用戶在我們的小程序里一些行為，在后臺(tái)我們也可以模糊地確認(rèn)用戶。下面這篇文章主要給大家介紹了關(guān)于小程序登錄鑒權(quán)的相關(guān)資料，需要的朋友可以參考下。
2018-04-04
JavaScript實(shí)現(xiàn)列表分頁(yè)功能特效
最近在做一個(gè)小項(xiàng)目，有時(shí)需要制作靜態(tài)頁(yè)面網(wǎng)站，而一旦涉及到文章的分頁(yè)，實(shí)現(xiàn)起來(lái)非常麻煩，自己又剛?cè)腴T(mén)，對(duì)js不是很熟悉，所以就拿來(lái)練練手。
2015-05-05
UNIAPP實(shí)現(xiàn)微信小程序登錄授權(quán)和手機(jī)號(hào)授權(quán)功能(uniapp做微信小程序)
uniapp開(kāi)發(fā)小程序,先授權(quán)用戶信息后再出現(xiàn)手機(jī)號(hào)授權(quán)的頁(yè)面進(jìn)行手機(jī)號(hào)授權(quán),完成后返回上一頁(yè)面并把信息存入后臺(tái)以及前臺(tái)緩存中,方便使用,這篇文章主要介紹了UNIAPP實(shí)現(xiàn)微信小程序登錄授權(quán)和手機(jī)號(hào)授權(quán)（uniapp做微信小程序）,需要的朋友可以參考下
2024-08-08
js實(shí)現(xiàn)手機(jī)拍照上傳功能
這篇文章主要為大家詳細(xì)介紹了js實(shí)現(xiàn)手機(jī)拍照上傳功能，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下
2017-01-01