【发布时间】：2018-02-04 02:35:09
【问题描述】：
我用 javascript 制作了一个视频播放器，用于我的网站。除了opera之外的所有浏览器（我还没有检查过Safari）都可以播放我的视频文件！
现在如何让它与 Opera 浏览器一起工作或支持任何浏览器？
我希望该用户也可以在他们的移动设备上播放我的视频，我需要为此采取任何进一步的措施吗？
.PHP：
<section id="videoPlayer" title="Click on the 'Play' button to play">
<video id="myMovie" width="640" height="360">
<source src="webvid.mp4">
</video>
<nav id="control_bar">
<div id="buttons">
<button type="button" id="playButton">Play</button>
</div>
<div id="defaultBar">
<div id="progressBar"></div>
</div>
<div style="clear:both"></div>
</nav>
</section>
.JS：
/* start video player*/
function doFirst(){
barSize=407.5;
myMovie=document.getElementById('myMovie');
playButton=document.getElementById('playButton');
bar=document.getElementById('defaultBar');
progressBar=document.getElementById('progressBar');
playButton.addEventListener('click', playOrPause, false);
bar.addEventListener('click',clickedBar,false);
}
function playOrPause(){
if(!myMovie.paused && !myMovie.ended){
myMovie.pause();
playButton.innerHTML='Play';
window.clearInterval(updateBar);
}else{
myMovie.play();
playButton.innerHTML='Pause';
updateBar=setInterval(update,500);
}
}
function update(){
if(!myMovie.ended){
var size=parseInt(myMovie.currentTime*barSize/myMovie.duration);
progressBar.style.width=size+'px';
}else{
progressBar.style.width='0px';
playButton.innerHTML='Play';
window.clearInterval(updateBar);
}
}
function clickedBar(e){
if(!myMovie.paused &&! myMovie.ended){
var mouseX=e.pageX-bar.offsetLeft;
var newtime=mouseX*myMovie.duration/barSize;
myMovie.currentTime=newtime;
progressBar.style.width=mouseX+'px';
}
}
window.addEventListener('load', doFirst,false);
/* end video player*/
【问题讨论】：
标签： javascript jquery html video