一個(gè)html5播放視頻的video控件只支持android的默認(rèn)格式mp4和3gp
更新時(shí)間:2014年05月08日 11:12:37 作者:
寫了個(gè)html5播放視頻的video控件,只支持mp4和3gp(android和ios默認(rèn)支持的格式就寫了這個(gè)) ,需要的朋友可以參考下
復(fù)制代碼 代碼如下:
<!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è)置的屬性的值,拼寫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>
您可能感興趣的文章:
- Android使用VideoView播放本地視頻和網(wǎng)絡(luò)視頻的方法
- Android提高之MediaPlayer播放網(wǎng)絡(luò)視頻的實(shí)現(xiàn)方法
- Android使用VideoView出現(xiàn)無(wú)法播放此視頻問(wèn)題的解決方法
- 詳解Android App中使用VideoView來(lái)實(shí)現(xiàn)視頻播放的方法
- Android播放assets文件里視頻文件相關(guān)問(wèn)題分析
- Android如何讓W(xué)ebView中的HTML5頁(yè)面實(shí)現(xiàn)視頻全屏播放
- Android自定義SeekBar實(shí)現(xiàn)視頻播放進(jìn)度條
- android webvie指定視頻播放器播放網(wǎng)站視頻
- android視頻播放簡(jiǎn)單實(shí)現(xiàn)示例(VideoView&MediaPlayer)
- Android實(shí)現(xiàn)音樂(lè)視頻播放
相關(guān)文章
JS效率個(gè)人經(jīng)驗(yàn)談(8-15更新),加入range技巧
JS效率個(gè)人經(jīng)驗(yàn)談(8-15更新),加入range技巧...2007-01-01Bootstrap的popover(彈出框)在append后彈不出(失效)
這篇文章主要介紹了Bootstrap的popover(彈出框)在append后彈不出,失效的解決方法,具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2017-02-02jquery結(jié)合CSS使用validate實(shí)現(xiàn)漂亮的驗(yàn)證
這篇文章主要介紹了jquery結(jié)合CSS使用validate實(shí)現(xiàn)漂亮的驗(yàn)證,需要的朋友可以參考下2015-01-01js實(shí)現(xiàn)上傳圖片及時(shí)預(yù)覽
這篇文章主要為大家詳細(xì)介紹了js實(shí)現(xiàn)上傳圖片及時(shí)預(yù)覽的相關(guān)資料,具有一定的參考價(jià)值,感興趣的朋友可以參考一下2016-05-05javascript實(shí)現(xiàn)在網(wǎng)頁(yè)任意處點(diǎn)左鍵彈出隱藏菜單的方法
這篇文章主要介紹了javascript實(shí)現(xiàn)在網(wǎng)頁(yè)任意處點(diǎn)左鍵彈出隱藏菜單的方法,設(shè)計(jì)鼠標(biāo)事件及css樣式操作的相關(guān)技巧,需要的朋友可以參考下2015-05-05js簡(jiǎn)單實(shí)現(xiàn)點(diǎn)擊左右運(yùn)動(dòng)的方法
這篇文章主要介紹了js簡(jiǎn)單實(shí)現(xiàn)點(diǎn)擊左右運(yùn)動(dòng)的方法,實(shí)例分析了javascript實(shí)現(xiàn)左右運(yùn)動(dòng)的相關(guān)要點(diǎn)與技巧,非常具有實(shí)用價(jià)值,需要的朋友可以參考下2015-04-04