一個html5播放視頻的video控件只支持android的默認格式mp4和3gp

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

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

 
<!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水平有限，不喜勿噴，全當沒事看看,video是html5中的新控件，大家可以看看 

<script type="text/javascript"> 

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

您可能感興趣的文章:

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