|
|
|
ถามพี่ๆ เรื่องโค้ด java ให้เล่นเพลงอัตโนมัติค่ะ................... |
|
|
|
|
|
|
|
หัวข้อถามจาวา แต่ทำไมเนื้อหา เป็น JavaScript ถ้าหมายถึงอย่างหลัง ใช้เฟรมเวิร์ดอะไร projekktor มาจากไหน
|
|
|
|
|
Date :
2021-05-18 20:29:00 |
By :
พญามัจจุราช |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
Code (JavaScript)
***************************************/
.projekktor {
font-family: 'Lucida Grande', 'Trebuchet MS', Arial, Sans-Serif;
font-size: 12px;
font-weight: bold;
text-transform: uppercase;
padding: 0;
display: block;
position: relative;
overflow: hidden;
width: 640px !important;
height: 385px !important;
margin:0 auto;
}
.pptestcard {
background: url("noise.gif") center center repeat;
width: 100%;
height: 100%;
color: #fff;
font-size: 18px;
overflow: hidden;
}
.pptestcard p {
background-color: #3b393e;
width: 60%;
margin: auto;
line-height: 25px;
position: relative;
top: 25%;
padding: 10px;
border:5px solid #000;
text-align: center;
}
/***************************************
display plugin
***************************************/
.ppdisplay {
position: relative !important;
top: 0;
left: 0;
width: 100%;
height: 100%;
margin: 0;
padding: 0;
}
.ppdisplay .inactive,
.ppstart.inactive,
.ppbuffering.inactive {
display: none;
}
.ppstart {
position: absolute;
left: 50%;
bottom: 50%;
margin-left:-45px;
margin-bottom: -38px;
cursor: pointer;
height: 84px;
width: 84px;
display: block;
padding: 0px;
background: url("../maccaco/start.png") no-repeat left top transparent;
}
.ppstart:hover {
background: url("../maccaco/start.png") no-repeat left bottom transparent;
}
.ppstart:active {
background: url("../maccaco/start.png") no-repeat left -169px transparent;
}
.ppbuffering {
position: absolute;
left: 50%;
bottom: 50%;
margin-left:-45px;
margin-bottom: -38px;
display: block;
z-index:9010;
padding: 0px;
background: url("../maccaco/buffering.gif") no-repeat center center #000;
height: 84px;
width: 84px;
-moz-border-radius: 15px;
-webkit-border-radius: 15px;
border-radius: 15px;
}
/***************************************
controlbar plugin
***************************************/
.ppcontrols {
position: absolute;
bottom: 0;
right:0;
display: block;
width: 100%;
height: 36px;
background: #2e2d2d; /* Old browsers */
background: -moz-linear-gradient(top, #2e2d2d 0%, #0f0e0e 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#2e2d2d), color-stop(100%,#0f0e0e)); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top, #2e2d2d 0%,#0f0e0e 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top, #2e2d2d 0%,#0f0e0e 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(top, #2e2d2d 0%,#0f0e0e 100%); /* IE10+ */
background: linear-gradient(to bottom, #2e2d2d 0%,#0f0e0e 100%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#2e2d2d', endColorstr='#0f0e0e',GradientType=0 ); /* IE6-9 */
border-style:solid;
border-color:#413e3e;
border-width:1px 0;
padding: 0;
margin:0;
}
.ppcontrols .active {
display: block;
}
.ppcontrols .inactive {
display: none;
}
.projekktor.notransitions .ppcontrols.active {
display: block;
}
.projekktor.notransitions .ppcontrols.inactive {
display: none;
}
.ppcontrols.active {
filter: alpha(opacity=100);
-moz-opacity: 1;
-khtml-opacity: 1;
opacity: 1;
-webkit-backface-visibility: hidden;
-webkit-transform:translate3d(0,0,0);
-webkit-transition: opacity 0.1s linear;
-moz-transition: opacity 0.1s linear;
-o-transition: opacity 0.1s linear;
transition: opacity 0.1s linear;
}
.ppcontrols.inactive {
filter: alpha(opacity=0);
-moz-opacity: 0;
-khtml-opacity: 0;
opacity: 0;
filter: alpha(opacity=0);
-webkit-backface-visibility: hidden;
-webkit-transform:translate3d(0,0,0);
-webkit-transition: opacity 0.5s linear;
-moz-transition: opacity 0.5s linear;
-o-transition: opacity 0.5s linear;
transition: opacity 0.5s linear;
}
.ppcontrols ul {
list-style-type: none;
}
.ppcontrols ul.left {
position: relative;
top: 0;
left: 0;
padding: 0;
margin:0;
}
.ppcontrols ul.right {
position: relative;
top: 0;
right: 0;
padding: 0;
margin:0;
}
.ppcontrols ul.bottom {
position: relative;
top: 31px;
left: 0;
padding: 0;
margin:0;
}
.ppcontrols ul.left li {
float: left;
position: relative;
}
.ppcontrols ul.right li {
float: right;
position: relative;
}
/* PLAY / PAUSE - left */
.ppplay,
.pppause {
background: url("../maccaco/maccaco.png") no-repeat left top transparent;
width: 30px;
height: 30px;
cursor: pointer;
border-right: 1px solid #000;
}
.ppplay:hover {
background: url("../maccaco/maccaco.png") no-repeat left -35px transparent;
}
.ppplay:active {
background: url("../maccaco/maccaco.png") no-repeat left -36px transparent;
}
.pppause {
background: url("../maccaco/maccaco.png") no-repeat left -70px transparent;
}
.pppause:hover {
background: url("../maccaco/maccaco.png") no-repeat left -105px transparent;
}
.pppause:active {
background: url("../maccaco/maccaco.png") no-repeat left -106px transparent;
}
/* Enter / Exit Fullscreen - right */
.projekktor.audio .ppfsenter,
.projekktor.audio .ppfsexit {
display: none;
}
.ppfsenter,
.ppfsexit {
width: 30px;
height: 30px;
background: url("../maccaco/maccaco.png") no-repeat right top transparent;
cursor: pointer;
border-left: 1px solid #413e3e;
}
.ppfsenter:hover {
background: url("../maccaco/maccaco.png") no-repeat right -35px transparent;
}
.ppfsenter:active {
background: url("../maccaco/maccaco.png") no-repeat right -36px transparent;
}
.ppfsexit {
background: url("../maccaco/maccaco.png") no-repeat right -70px transparent;
}
.ppfsexit:hover {
background: url("../maccaco/maccaco.png") no-repeat right -105px transparent;
}
.ppfsexit:active {
background: url("../maccaco.maccaco.png") no-repeat right -106px transparent;
}
/* Unmute / Max volume - right */
.ppvmax {
width: 30px;
height: 30px;
border-right: 1px solid #000;
border-left:none;
background: url("../maccaco/maccaco.png") no-repeat -842px top transparent;
}
.ppvmax:hover {
background: url("../maccaco/maccaco.png") no-repeat -842px -35px transparent;
}
.ppvmax:active {
background: url("../maccaco/maccaco.png") no-repeat -842px -36px transparent;
}
/* Mute / Min volume - right */
.ppmute {
width: 29px;
height: 30px;
border-left:1px solid #413e3e;
background: url("../maccaco/maccaco.png") no-repeat -750px top transparent;
}
.ppmute:hover {
background: url("../maccaco/maccaco.png") no-repeat -750px -35px transparent;
}
.ppmute:active {
background: url("../maccaco/maccaco.png") no-repeat -750px -36px transparent;
}
/* volume slider - right */
.ppvslider {
margin: 13px 5px;
height: 16px;
width: 60px;
background: url("../maccaco/maccaco.png") no-repeat -781px -13px transparent;
}
.ppvmarker {
position: relative;
right:0;
left: 0;
height: 6px;
width: 100%;
background: url("../maccaco/maccaco.png") no-repeat -634px -13px transparent;
}
.ppvknob {
cursor: pointer;
z-index: 201;
position: relative;
background: url("../maccaco/maccaco.png") no-repeat -699px -5px transparent;
top: -13px;
left:0;
width: 6px;
height: 20px;
padding: 0;
}
/* time / time left */
.pptimeleft {
color: #fff;
width: 130px;
line-height: 30px;
height: 30px;
border-left: 1px solid #413e3e;
border-right: 1px solid #000;
text-align: center;
overflow: hidden;
}
/* special for single
.pptimeleft {
background: url("maccaco.png") no-repeat -91px top transparent;
}
*/
/* lo / hi quality toggle */
.pploquality, .pphiquality {
background: url("../maccaco/maccaco.png") no-repeat -60px -72px transparent;
width: 30px;
height: 30px;
cursor: pointer;
border-left:1px solid #413e3e;
border-right:1px solid #000;
}
.pphiquality:hover {
background: url("../maccaco/maccaco.png") no-repeat -32px -106px transparent;
}
.pploquality {
background: url("../maccaco/maccaco.png") no-repeat -32px -72px transparent;
}
.pploquality:hover {
background: url("../maccaco/maccaco.png") no-repeat -32px -106px transparent;
}
.pphiquality:active, .pploquality:active {
background: url("../maccaco/maccaco.png") no-repeat -32px -105px transparent;
}
/* previous / next item */
.ppnext,
.ppprev {
display:block;
background: url("../maccaco/maccaco.png") no-repeat -59px top transparent;
width: 30px;
height: 30px;
cursor: pointer;
border-left:1px solid #413e3e;
border-right:1px solid #000;
}
.ppnext { border-right:none;}
.ppnext:hover {
background: url("../maccaco/maccaco.png") no-repeat -59px -35px transparent;
}
.ppnext:active {
background: url("../maccaco/maccaco.png") no-repeat -59px -36px transparent;
}
.ppprev {
background: url("../maccaco/maccaco.png") no-repeat -32px top transparent;
}
.ppprev:hover {
background: url("../maccaco/maccaco.png") no-repeat -32px -35px transparent;
}
.ppprev:active {
background: url("../maccaco/maccaco.png") no-repeat -32px -36px transparent;
}
.pploop,
.pploop .on,
.pploop .off {
display:block;
line-height: 30px;
color: #fff;
width: 30px;
height: 30px;
cursor: pointer;
border-left:1px solid #413e3e;
border-right:1px solid #000;
}
.pploop.off {
color: #ccc;
}
/* Scrubber, Playhead and fluff */
.ppscrubber {
position: absolute;
height: 5px;
width: 100%;
background: url("../maccaco/maccaco-load.gif") repeat-x left top transparent;
left: 0;
margin: 0;
padding: 0;
border-bottom: 1px solid #000;
}
.audio .ppscrubber {
background: url("../maccaco/maccaco-load-static.png") repeat-x left top transparent;
}
.ppscrubberdrag {
cursor: pointer;
z-index: 302;
position: absolute;
background-color: transparent;
top:0;
left:0;
height: 5px;
width: 100%;
}
.ppplayhead, .pploaded {
position: relative;
display: block;
left: 0;
bottom: 0;
height: 5px;
width: 1px;
background-color:#fff;
cursor: pointer;
z-index: 301;
-webkit-backface-visibility: hidden;
-webkit-transform:translate3d(0,0,0);
-webkit-transition: width 0.1s linear;
-moz-transition: width 0.1s linear;
-o-transition: width 0.1s linear;
transition: width 0.1s linear;
}
.ppcuepoint {
position: absolute;
height: 5px;
width: 5px;
background-color: yellow;
top: 0;
left: 0;
margin: 0;
padding: 0;
z-index: 302;
}
.ppcuepoint:hover {
background-color: red;
cursor: pointer;
}
.pploaded {
position: relative;
z-index: 10;
background: rgb(65, 62, 62) ;
opacity: 0.8;
filter: alpha(opacity = 80);
-ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=80)";
}
.ppplayhead {
margin-top: -5px;
}
.ppscrubbertip {
padding: 3px;
position: absolute;
top: -30px;
left: 25px;
font-size: 11px;
line-height: 15px;
color: #fdfdfd;
background: #2e2d2d;
z-index: 10;
display: none;
}
.ppscrubbertip:after {
top: 100%;
border: solid transparent;
content: " ";
height: 0;
width: 0;
position: absolute;
pointer-events: none;
}
.ppscrubbertip:after {
border-color: rgba(2, 28, 79, 0);
border-top-color: #333;
border-width: 5px;
left: 50%;
margin-left: -5px;
}
/****************************
/* VAST ad plugin specific */
/***************************/
.ppad .left,
.ppad .right {
display: none;
border: none;
}
.ppad .ppcontrols {
background: transparent;
border: none;
}
.ppad .ppadtitle {
position: absolute;
bottom: 2%;
left: 2%;
border: none;
}
.ppadskip {
position: absolute;
padding-top: 2px;
bottom: -10px;
right: 0px;
width: 85%;
height: 28px;
background-color: transparent;
color: #fdfdfd;
}
.ppskip.locked {
background-color: red;
}
.ppskip.unlocked {
cursor: pointer;
color: #00B0FF;
}
.pppostad .ppprev.active {
display: none;
}
.ppadoverlay.inactive {
display: none;
}
/****************************
/* Subtitles plugin specific */
/***************************/
.pptracksbtn.inactive,
.pptracks.inactive {
display: none;
}
.pptracksbtn.active,
.pptracks.active {
display: block;
}
.pptracks span {
position: relative;
}
.pptracksbtn.on,
.pptracksbtn.off {
background: url("../maccaco/maccaco.png") no-repeat -120px -72px transparent;
width: 30px;
height: 30px;
cursor: pointer;
border-left:1px solid #413e3e;
border-right:1px solid #000;
}
.pptracksbtn.on {
background: url("../maccaco/maccaco.png") no-repeat -92px -72px transparent;
}
.pptracksbtn:hover {
background: url("../maccaco/maccaco.png") no-repeat -118px -106px transparent;
}
.pptracks {
text-align: center;
position: absolute;
bottom: 0;
left: 0;
width: 100%;
height: auto;
overflow: hidden;
color: #fdfdfd;
background:rgb(0,0,0);
background: transparent\9;
background:rgba(0,0,0,0.6);
filter:progid:DXImageTransform.Microsoft.gradient(startColorstr=#99000000,endColorstr=#99000000);
zoom: 1;
padding: 5px 0;
z-index: 1000;
}
.pptracks.shifted {
bottom: 38px;
}
@media(max-width:667px){
.projekktor {
width: 460px !important;
height: 324px !important;
}
}
@media(max-width:480px){
.projekktor {
width: 405px !important;
height: 284px !important;
}
}
@media(max-width:414px){
.projekktor {
width: 324px !important;
height: 256px !important;
}
}
@media(max-width:320px){
.projekktor {
width: 271px !important;
height: 222px !important;
}
.ppstart {
left: 54%;
bottom: 52%;
height: 60px;
width: 60px;
background-size: 100% !important;
background: url(../maccaco/start.png) no-repeat left top transparent;
}
}
|
|
|
|
|
Date :
2021-05-19 08:55:07 |
By :
jaja |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
Code (PHP)
<script type="text/javascript">
$(document).ready(function() {
projekktor('#player_a',
{
poster: 'media/intro.jpg',
width: 640,
height: 385,
playlist: [
{
1: {src: "media/intro.mp4", type: "video/mp4"}
}
]
},
function(player) {} // on ready
);
});
</script>
ใส่ครอบภาษาให้ดูอ่านง่ายหน่อยครับ
ตามความเห็น 1 ใช้เครื่องมืออะไรในการเล่น
หรือ class "projektor" อยู่ใน framework ชื่ออะไร <script src="??? ชื่อไฟล์ ตรงนี้ ?????" >
ถ้าไม่อยากบอก ก็ต้องไปหา document เขาอ่านเอาเอง จะบอกไว้ว่า ต้องใช้ method ตัวไหนเพื่อที่จะได้เล่นอัตตโนมัตได้
ส่วนข้างล่างนี้เป็นการเดาเอาล้วนๆ ซึ่งโค๊ดส่วนใหญ่จะใช้ลักษณะนี้
Code (PHP)
<script type="text/javascript">
$(document).ready(function() {
projekktor('#player_a',
{
poster: 'media/intro.jpg',
width: 640,
height: 385,
playlist: [
{
1: {src: "media/intro.mp4", type: "video/mp4"}
}
]
},
function(player) {} // on ready
).play();
});
</script>
ปล. ถ้าไม่มีผู้รู้มาตอบ แนะนำ เปลี่ยนไปใช้อย่างอื่นแทนครับ projekktor ตัวนี้ 7 ปีมาแล้ว ไม่มีการพัฒนาต่อ
ตัว web เจ้าของ ก็หายไปจากโลกนี้แล้ว คู่มือก็หาไม่ได้
|
ประวัติการแก้ไข 2021-05-19 09:15:07
|
|
|
|
Date :
2021-05-19 09:02:34 |
By :
Chaidhanan |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
Load balance : Server 01
|