在浏览器里面,本来想将下面的黄色代码代码改成file,以为这样可以选择播放的文件,但是实际上是不行的,因为浏览器会保护,不允许载入如
C:\fakepath\testVideo.mp4这样的绝对路径,必须使用相对路径,将视频和网页文件放在一起,然后在网页输入文件名就可以正常播放
像下图
<!DOCTYPE html>
< html lang= "en" >
< head >
< meta charset= "UTF-8" >
< title >视频播放器</ title >
< script type= "text/javascript" >
function playOrPauseVideo ()
{
var videoUrl = document . getElementById ( "videoUrl" ). value ;
console . log ( videoUrl );
var video = document . getElementById ( "video" );
video . addEventListener ( "timeupdate" , function ()
{
var timeDisplay = document . getElementById ( "time" );
timeDisplay . innerHTML = Math . floor ( video . currentTime )+ "/" + Math . floor ( video . duration )+ "(秒)" ;
}, false );
if ( video . paused ) {
if ( videoUrl != video . src ) {
video . src = videoUrl ;
video . load ();
} else
{
video . play ();
}
document . getElementById ( "playButton" ). value = "暂停" ;
} else
{
video . pause ();
document . getElementById ( "playButton" ). value = "播放" ;
}
}
</ script >
</ head >
< body >
< video id= "video" width= "400" height= "300" autoplay loop= "loop" >
</ video >
< br />
视频地址:< input type= " text " id= "videoUrl" />
< input id= "playButton" type= "button" οnclick= " playOrPauseVideo () " value= "播放" />
< span id= "time" ></ span >
</ body >
</ html >