VLC in web systems (X-vlc-plugin How to embed VLC in HTML) the first __ garbled problem

Source: Internet
Author: User

VLC is undoubtedly a good player software, sub-b/S Web project, if you can embed it in the page, do a page preview or other, is very good.

The first step: Download the VLC installation program; (Recommended 1.0.3 or 1.0.5 version, more stable)

http://download.videolan.org/pub/videolan/vlc/

Step two: Install; (I really do test on XP, Linux under the test ...) )


Note that the Mozilla plug-in is selected, otherwise Firefox can not use the VLC control (ActiveX plugin is IE, I was in IE under the test)

Step Three: Page coding (I don't talk nonsense anymore, directly on the code)

page 1:test.html

<meta http-equiv= "Content-type" content= "text/html; Charset=utf-8 "/>
<title> on-Demand testing </title>
<script type= "Text/javascript" charset= "UTF-8" >
var vdurl = ""; Play path (defined as global variable, provide playback path to child page playback control)
function ShowDialog (type) {
Vdurl= "e:\\ Taiji guru 06.avi";
var temp=document.getelementsbyname (' FileName ') [0].value;
if (temp== ') {
Alert (' Please select a valid local video file, or enter a network video address ... ');
Return
}
Vdurl=temp;
Eventcode= "XXXX";
if (type==1) {
var winobj=window.open ('./empty_play.html ', ' play ',
' height=640, Width=740,toolbar=yes, Menubar=yes, Scrollbars=no, Resizable=no,location=no, Status=no ');
}else if (type==2) {
var winobj=window.open ('./play.html ', ' play ',
' height=640, Width=740,toolbar=yes, Menubar=no, Scrollbars=no, Resizable=no,location=no, Status=no ');
}

}
</script>
<body>
<input type= "File" Name= "FileName" style= "width:350px" >&nbsp;&nbsp;
<input type= "button" value= "&nbsp; broadcast &nbsp;&nbsp; put &nbsp;" onclick= "ShowDialog (1);" >
<br>
<span style= "color:red;font-weight:bold;font-size:14px" > Hint:</span>
<span style= "color:blue;font-weight:normal;font-size:14px" > Please select Local video or enter a network video path (it is recommended to play through VLC media player first). </span>
</body>

page 2:empty_play.html

<meta http-equiv= "Content-type" content= "text/html; Charset=utf-8 "/>
<title> Video Clips </title>
<script type= "Text/javascript" charset= "UTF-8" >
<!--shielding Right button
Document.oncontextmenu=function (e) {return false;}
-->
var VLC; VLC objects
var itemId; The ID of the playlist in the play list
var Vlcsound; VLC volume size (initialization defaults to 50)
var videolength; Video Total time length
var then_time; Play Start time (playback start date, see below implementation code, it is milliseconds oh)
var isplaying=0; Play status (0 not played 1 playback)
initializing = = = It is important to control the entrance of the program
function Initplayurl () {
Vlc=document.getelementbyid ("VLC");
Add Playback Address
Vlc.playlist.add (WINDOW.OPENER.VDURL);
Play
Vlc.playlist.play ();
Add Play Address mode 2--recommended to control the playlist in the following way
var Vedio_url=window.opener.vdurl;
Itemid= Vlc.playlist.add (Vedio_url);
Vlc.playlist.playItem (ITEMID);

Get VLC Current volume
Vlcsound=vlc.audio.volume;
Set VLC volume values
document.getElementById ("Vlc_sound"). Value=vlcsound;
Play button not available
document.getElementById ("Play_button"). Disabled=true;

Check the status of the show-note that this is a deferred operation Oh (settimeout in milliseconds, 0.5 seconds here)
SetTimeout (checkvediostatus,500);
}

Check the status of a Play program
function Checkvediostatus () {
if (vlc.input.state>2 && vlc.input.state<5) {
isplaying=1;
Vlc.input.time current playback length, in milliseconds
Vlc.input.length Program total time, unit milliseconds
Videolength=parseint (vlc.input.length/1000);
var temp_total_time=parsetime (videolength);
Total time Length setting
document.getElementById ("Vedio_length"). Value=temp_total_time;
You can now enter a time period jump
document.getElementById ("Time_change"). Disabled=false;
Get current system time
Then_time=new Date (). GetTime ();
Calculate the current playback time point
Checktime ();
}else{
If it's not playing state, it's delayed.
SetTimeout (checkvediostatus,500);
}
}

Real-time detection system time, the calculation of video playback length (typical stopwatch function)
function Checktime () {
if (isplaying==1) {
SetTimeout ("Checktime ();", 50);
var temp_time=parseint ((New Date (). GetTime ()-Then_time)/1000);
document.getElementById ("Current_video_time"). Value=parsetime (Temp_time);
}
}

Change the playback address
function Changenewbegintime () {
Vlc.input.time get current playback time (milliseconds)/also reset current playback time point
var Jumptime=document.getelementbyid ("Change_length"). Value;
if (jumptime!= "") {
if (jumptime>videolength) {
Alert ("Sorry, the input value is greater than the total length of the video ...");
Return
}
vlc.input.time=jumptime*1000;
Then_time=new Date ()-jumptime*1000;
}
}

Convert seconds to time format (HH:MM:SS)
function Parsetime (numlength) {
var h_time=0;
var m_time=0;
var s_time=0;
if (numlength>=60) {
M_time=parseint (NUMLENGTH/60);
S_time=parseint (NUMLENGTH%60);
}else{
S_time=numlength;
}
if (m_time>=60) {
H_time=parseint (M_TIME/60);
M_time=parseint (M_TIME%60);
}

if (h_time<10) {
H_time= "0" +h_time;
}
if (m_time<10) {
M_time= "0" +m_time;
}
if (s_time<10) {
S_time= "0" +s_time;
}
Return h_time+ ":" +m_time+ ":" +s_time;
}

Stop playing
function Stopplay () {
Vlc.playlist.stop ();
isplaying=0;

Modify Play/Stop button status
document.getElementById ("Play_button"). Disabled=false;
document.getElementById ("Stop_button"). Disabled=true;

Modify the status of a jump button
document.getElementById ("Change_length"). value= "";
document.getElementById ("Time_change"). Disabled=true;

Current video playback time point empty
document.getElementById ("Current_video_time"). value= "";
}
Play again
function Repeatplay () {
Vlc.playlist.play ();
SetTimeout (checkvediostatus,500);
Modify Play/Stop button status
document.getElementById ("Play_button"). Disabled=true;
document.getElementById ("Stop_button"). Disabled=false;
}
Mute
function Nosound () {
if (vlcsound>0) {
Vlcsound=0;
}
Vlc.audio.toggleMute ();
Vlcsound=vlc.audio.volume;
document.getElementById ("Vlc_sound"). Value=vlcsound;
if (vlcsound==0) {
document.getElementById ("No_sound"). Value= "&nbsp; restore volume &nbsp;";
document.getElementById ("No_sound"). Value= "" + "restore Volume" + "";
}else{
document.getElementById ("No_sound"). value= "&nbsp; static &nbsp;&nbsp;&nbsp;&nbsp; sound &nbsp;";
document.getElementById ("No_sound"). Value= "" + "static" + "" + "sound" + "";
}
}
Volume Plus and minus
function Soundchange (nums) {
if (nums<0 && vlcsound==0) {
Alert ("The volume is minimal, the volume can no longer be reduced ...");
Return
}
Vlcsound+=nums;
if (vlcsound<=0) {
Vlcsound=0;
document.getElementById ("No_sound"). Value= "" + "restore Volume" + "";
}else{
When the volume is >0, the mute logo should be turned on
document.getElementById ("No_sound"). Value= "" + "static" + "" + "sound" + "";
}
if (vlcsound>200) {
Alert ("Maximum volume, no increase in volume ...");
vlcsound=200;
}
Vlc.audio.volume =vlcsound;
document.getElementById ("Vlc_sound"). Value=vlcsound;
}
Fullscreen
function Screenfull () {
Vlc.video.toggleFullscreen ()
}
</script>
<body onload= "Initplayurl ()" >
<!--[If ie]>
<object type= ' application/x-vlc-plugin ' id= ' VLC ' events= ' True '
Classid= ' clsid:9be31822-fdad-461b-ad51-be1d1c159921 ' width= "720" height= "540" >
<param name= ' MRL ' value= '/>
<param name= ' volume ' value= '/>
<param name= ' autoplay ' value= ' false '/>
<param name= ' Loop ' value= ' false '/>
<param name= ' fullscreen ' value= ' false '/>
</object>
<! [endif]-->
<!--[if! ie]><!-->
<object type= ' application/x-vlc-plugin ' id= ' VLC ' events= ' True ' width= ' 720 ' height= ' 540 ' >
<param name= ' MRL ' value= '/>
<param name= ' volume ' value= '/>
<param name= ' autoplay ' value= ' true '/>
<param name= ' Loop ' value= ' false '/>
<param name= ' fullscreen ' value= ' false '/>
</object>
<!--<! [endif]-->
<br><br>
<input type= "button" value= "&nbsp; broadcast &nbsp;&nbsp;&nbsp;&nbsp; put &nbsp;" Onclick= "Repeatplay ();" Id= "Play_button" >&nbsp;&nbsp;
<input type= "button" value= "&nbsp; stop &nbsp;&nbsp;&nbsp;&nbsp; Check &nbsp;" Onclick= "Stopplay ();" Id= "Stop_button" >&nbsp;&nbsp;
<input type= "button" value= "&nbsp; static &nbsp;&nbsp;&nbsp;&nbsp; sound &nbsp;" Onclick= "Nosound ();" Id= "No_sound" >&nbsp;&nbsp;
<input type= "button" value= "&nbsp; Decrease Volume &nbsp;" Onclick= "Soundchange (-10);" >&nbsp;&nbsp;
<input type= "button" value= "&nbsp; Increase volume &nbsp;" onclick= "Soundchange (10);" >&nbsp;&nbsp;
<input type= "button" value= "&nbsp; full &nbsp;&nbsp;&nbsp;&nbsp; screen &nbsp;" Onclick= "Screenfull ();" >

&nbsp;&nbsp;&nbsp;&nbsp;
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;

<font color= "Red" size= "2" > Volume: </font><input type= "text" id= "Vlc_sound" style= "Width:40px;color:blue" >
<br>
<font color= "Red" size= "2" > Total time: </font><input type= "text" id= "Vedio_length" "style=" Width:65px;color: Blue ">&nbsp;
<input type= "text" id= "Current_video_time" style= "Width:65px;color:blue" >

&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;

<font color= "Red" size= "2" > Jump: </font><input type= "text" id= "Change_length" style= "Width:100px;color": Blue ">
<span style= "color:blue;font-weight:normal;font-size:14px" > Sec </span>
&nbsp;
<input type= "button" value= "to determine" id= "Time_change" disabled= "Disabled" onclick= "changenewbegintime ();" >
</body>

========================== End ======================

Preview effect

Big Ye's, the Cato time is very strange, the video card that plays is not down.

Because I have just studied, I hope that Members will make more comments. If you need the source code, QQ contact or leave your mailbox;

qq:305409913

Email:

Please continue to follow the next chapter: http://hi.baidu.com/huahua035/blog/item/20689b55897ecd40d10906f1.html

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.