flowplayer網頁視訊播放器事例詳解--包含各種引數說明（自譯） flowplayer網頁視訊播放器事例詳解--包含各種引數說明（自譯）
阿新 • • 發佈：2018-12-28
flowplayer網頁視訊播放器事例詳解--包含各種引數說明（自譯）
<html xmlns=
"http://www.w3.org/1999/xhtml"
>
<head runat=
"server"
>
<title></title>
<meta http-equiv=
"content-type"
content=
"text/html; charset=UTF-8"
/>
<script type="text/javascript"
src=
"flowplayer-3.2.11.min.js"
></script>
<link rel=
"stylesheet"
type=
"text/css"
href=
"style.css"
/></head>
<body>
<form id=
"form1"
runat=
"server"
>
<%--<div>
//簡單呼叫
<a
href=
"flowplayer-700.flv"
style=
"display:block;width:520px;height:330px"
id=
"player"
>
</a>
<script>
flowplayer(
"player"
,
"flowplayer-3.2.12.swf"
, {
clip: {
autoPlay:
false
,
autoBuffering:
true
}
});
</script>
</div>--%>
<div>
<a href=
"flowplayer-700.flv"
style=
"display: block; width: 520px; height: 330px"
id=
"player"
></a>
<script>
flowplayer(
"player"
,
"flowplayer-3.2.12.swf"
, {
//播放器主檔案（根據專案定亦可引用：http://releases.flowplayer.org/swf/flowplayer-3.2.12.swf）
clip: {
autoPlay:
true
,
//自動播放
autoBuffering:
true
//是否開啟緩衝
},
playlist: [
//播放列表
{
url:
"notfound.jpg"
,
//預設顯示圖片（如果沒有這顯示播放視訊的第一個畫面）
//duration: 5,//持續時間
scaling:
'orig'
//縮放
},
{
url:
'flowplayer-700.flv'
,
//需要播放的檔案
autoPlay:
false
,
provider:
'http'
,
autoBuffering:
true
}
],
plugins: {
controls: {
bottom: 0,
//功能條距底部的距離
height: 24,
//功能條高度
zIndex: 1,
fontColor:
'#ffffff'
,
timeFontColor:
'#333333'
,
playlist:
true
,
//上一個、下一個按鈕
play:
true
,
//開始按鈕
volume:
true
,
//音量按鈕
mute:
true
,
//靜音按鈕
stop:
true
,
//停止按鈕
fullscreen:
true
,
//全屏按鈕
scrubber:
true
,
//進度條
url:
"flowplayer.controls-3.2.12.swf"
,
//決定功能條的顯示樣式（功能條swf檔案,根據專案定亦可引用:http://releases.flowplayer.org/swf/flowplayer.controls-3.2.12.swf）
time:
true
,
//是否顯示時間資訊
autoHide:
true
,
//功能條是否自動隱藏
backgroundColor:
'#aedaff'
,
//背景顏色
backgroundGradient: [0.1, 0.1, 1.0],
//背景顏色漸變度（等分的點漸變）
opacity: 0.5,
//功能條的透明度
borderRadius:
'30'
,
//功能條邊角
tooltips: {
buttons:
true
,
//是否顯示
fullscreen:
'全屏'
,
//全屏按鈕，滑鼠指上時顯示的文字
stop:
'停止'
,
play:
'開始'
,
volume:
'音量'
,
mute:
'靜音'
,
next:
'下一個'
,
previous:
'上一個'
}
}
}
});
</script>
</div>
</form>
</body>
</html>
|
播放器外觀樣式定製頁面：http://flowplayer.org/documentation/skinning/controlbar.html
<html xmlns=
"http://www.w3.org/1999/xhtml"
>
<head runat=
"server"
>
<title></title>
<meta http-equiv=
"content-type"
content=
"text/html; charset=UTF-8"
/>
<script type=
"text/javascript"
src=
"flowplayer-3.2.11.min.js"
></script>
<link rel=
"stylesheet"
type=
"text/css"
href=
"style.css"
/>
</head>
<body>
<form id=
"form1"
runat=
"server"
>
<%--<div>
//簡單呼叫
<a
href=
"flowplayer-700.flv"
style=
"display:block;width:520px;height:330px"
id=
"player"
>
</a>
<script>
flowplayer(
"player"
,
"flowplayer-3.2.12.swf"
, {
clip: {
autoPlay:
false
,
autoBuffering:
true
}
});
</script>
</div>--%>
<div>
<a href=
"flowplayer-700.flv"
style=
"display: block; width: 520px; height: 330px"
id=
"player"
></a>
<script>
flowplayer(
"player"
,
"flowplayer-3.2.12.swf"
, {
//播放器主檔案（根據專案定亦可引用：http://releases.flowplayer.org/swf/flowplayer-3.2.12.swf）
clip: {
autoPlay:
true
,
//自動播放
autoBuffering:
true
//是否開啟緩衝
},
playlist: [
//播放列表
{
url:
"notfound.jpg"
,
//預設顯示圖片（如果沒有這顯示播放視訊的第一個畫面）
//duration: 5,//持續時間
scaling:
'orig'
//縮放
},
{
url:
'flowplayer-700.flv'
,
//需要播放的檔案
autoPlay:
false
,
provider:
'http'
,
autoBuffering:
true
}
],
plugins: {
controls: {
bottom: 0,
//功能條距底部的距離
height: 24,
//功能條高度
zIndex: 1,
fontColor:
'#ffffff'
,
timeFontColor:
'#333333'
,
playlist:
true
,
//上一個、下一個按鈕
play:
true
,
//開始按鈕
volume:
true
,
//音量按鈕
mute:
true
,
//靜音按鈕
stop:
true
,
//停止按鈕
fullscreen:
true
,
//全屏按鈕
scrubber:
true
,
//進度條
url:
"flowplayer.controls-3.2.12.swf"
,
//決定功能條的顯示樣式（功能條swf檔案,根據專案定亦可引用:http://releases.flowplayer.org/swf/flowplayer.controls-3.2.12.swf）
time:
true
,
//是否顯示時間資訊
autoHide:
true
,
//功能條是否自動隱藏
backgroundColor:
'#aedaff'
,
//背景顏色
backgroundGradient: [0.1, 0.1, 1.0],
//背景顏色漸變度（等分的點漸變）
opacity: 0.5,
//功能條的透明度
borderRadius:
'30'
,
//功能條邊角
tooltips: {
buttons:
true
,
//是否顯示
fullscreen:
'全屏'
,
//全屏按鈕，滑鼠指上時顯示的文字
stop:
'停止'
,
play:
'開始'
,
volume:
'音量'
,
mute:
'靜音'
,
next:
'下一個'
,
previous:
'上一個'
}
}
}
});
</script>
</div>
</form>
</body>
</html>
|
播放器外觀樣式定製頁面：http://flowplayer.org/documentation/skinning/controlbar.html