使用HTML5视频和Javascript的自定义控件的视频

我想创建一个没有默认控件的HTML5视频播放器，只需单击视频（或叠加div）即可播放/暂停。我想完全隐藏默认控件。我希望用户只能通过点击视频来暂停/播放。这可能吗？我最初的策略是在元素上面覆盖一个透明的div，作为我的播放/暂停按钮。下面是我开始的HTML和JavaScript，但需要一点帮助。感谢大家！使用HTML5视频和Javascript的自定义控件的视频

<!-- Video --> 
<div style="height:980px;height:540px;"> 
    <div style="z-index:100;position:absolute;"> 
     <video id="myVideo" width="980" height="540" poster="http://d3v.lavalobe.com/voicecarousel/images/Carousel_Still.png" audio="muted" autoplay="true"> 
      <source src="http://d3v.lavalobe.com/voicecarousel/video/CarouselWBG_v3.mp4" type="video/mp4"> 
     </video> 
    </div> 
    <div id="imgPoster" style="height:300px; width:300px; background-color:red; z-index:500;position:absolute;"></div> 
</div> 
<!-- end Video --> 




    <!-- JAVASCRIPT FOR VIDEO PLAYER --> 
<script type="text/javascript"> 
    var videoEl = $('#myVideo'); 
    playPauseBtn = $('#imgPoster'); 

    playPauseBtn.bind('click', function() { 
     if (videoEl.paused) { 
      videoEl.play(); 
     } else { 
      videoEl.pause(); 
     } 
    }); 

    videoEl.removeAttribute("controls"); 
</script> 
<!-- END JAVASCRIPT FOR VIDEO PLAYER -->

来源

2011-10-07 Chris G

可能不需要div覆盖，您可以将click事件绑定到视频元素本身以进行开始/暂停。如果您确切指定了需要帮助的内容，而不仅仅是需要帮助，这也会有所帮助。有些东西不行，或者你想让我们猜测？ – adeneo

没有必要在视频标记中的两个ID属性，如果只使用一种文件格式，以及视频和海报要链接到不存在有没有必要为一个单独的源代码。

不管怎样，下面的例子：

<video id="myVideo" width="980" height="540" poster="http://d3v.lavalobe.com/voicecarousel/images/myPoster.png" audio="muted" autoplay="true" src="http://d3v.lavalobe.com/voicecarousel/video/myVid.mp4" type="video/mp4"> 
</video> 

<script type="text/javascript"> 
    $("#myVideo").bind("click", function() { 
    var vid = $(this).get(0); 
     if (vid.paused) { 
      vid.play(); 
     } else { 
      vid.pause(); 
     } 
    }); 
</script>

编辑：添加一个小提琴：http://jsfiddle.net/SKfBY/

有一个快速浏览一下您的网站，视频酷:-) 如果你仔细观察”会发现有两个jQuery文件被添加，这里并不是真正的问题，但你只需要一个，第二个会让你的页面加载速度变慢。也不是问题，但你应该考虑使用下面的HTML5文档类型，因为视频元素是HTML5，但大多数浏览器无论如何都会发现它。这个问题似乎是我的错，jsFiddle自动插入$ document.ready函数，我忘了它在我的例子中，这就是为什么它不适合你。

下面是我将如何写它的一个完整的概要，我为你去掉了两个jQuery的实例，并用Google的jQuery版本取代，通常这是更好的选择，你也可以删除任何脚本“T需要，如消除SwfObject的，如果使用SWFObject该网站不包含任何Flash文件等

<!DOCTYPE html> 
<head> 
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 

<title>Untitled Document</title> 

<link rel="stylesheet" type="text/css" href="http://dev4.baytechlabs.com/Voice_Carousel/css/main/style.css"/> 
<link rel="stylesheet" type="text/css" href="http://dev4.baytechlabs.com/Voice_Carousel/css/main/thickbox.css"/> 
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.4/jquery.min.js"></script> 
<script src="http://dev4.baytechlabs.com/Voice_Carousel/js/main/cufon-yui.js" type="text/javascript"></script> 
<script src="http://dev4.baytechlabs.com/Voice_Carousel/js/main/Pristina_400.font.js" type="text/javascript"></script> 
<script src="http://dev4.baytechlabs.com/Voice_Carousel/js/main/MomsTypewriter_400.font.js" type="text/javascript"></script> 
<script src="http://dev4.baytechlabs.com/Voice_Carousel/js/main/cufon-config.js" type="text/javascript"></script> 
<script src="http://dev4.baytechlabs.com/Voice_Carousel/js/thickbox.js" type="text/javascript"></script> 
<script src="http://dev4.baytechlabs.com/Voice_Carousel/js/swfobject.js" type="text/javascript"></script> 
<script type="text/javascript" src="http://dev4.baytechlabs.com/Voice_Carousel/js/facebox/facebox.js"></script> 
<link href="http://dev4.baytechlabs.com/Voice_Carousel/js/facebox/facebox.css" media="screen" rel="stylesheet" type="text/css"/> 

<script type="text/javascript"> 
    $(document).ready(function() { 
     $("#myVideo").bind("click", function() { 
     var vid = $(this).get(0); 
      if (vid.paused) { 
       vid.play(); 
      } else { 
       vid.pause(); 
      } 
     }); 
    }); 
</script> 
</head> 
<body> 
    <video id="myVideo" width="980" height="540" audio="muted" autoplay="true" src="http://d3v.lavalobe.com/voicecarousel/video/CarouselWBG_v3.mp4" type="video/mp4"> 
    </video> 
</body> 
</html>

来源

2011-10-07 03:57:36 adeneo

谢谢adeneo！我删除了“自动播放”属性来测试它，但它不会播放或暂停...它为您工作吗？ –

增加了一个JSFiddle示例，在Chrome 15上可以正常工作。 – adeneo

感谢adeno，我想我真的很接近。你的小提琴似乎正在完美运作。我模仿它，但仍然不成功。你介意看看吗？感谢腺！ http://d3v.lavalobe.com/voicecarousel/test.html –

此代码的工作对我来说：

function vidplay() { 
var video = document.getElementById("video1"); 
var button = document.getElementById("play"); 
if (video.paused) { 
video.play(); 
button.textContent = "||"; 
} else { 
video.pause(); 
button.textContent = ">"; 
} 
} 

function restart() { 
var video = document.getElementById("video1"); 
video.currentTime = 0; 
} 

function skip(value) { 
var video = document.getElementById("video1"); 
video.currentTime += value; 
}

但时间设置为0，仅倒带视频;无回放。所以我想在视频后倒带重播，以及与此想出了：

function restart() { 
var video = document.getElementById("video1"); 
var button = document.getElementById("play"); 
if (video.paused) { 
} 
else { 
video.pause(); 
} 
video.currentTime = 0; 
video.play(); 
button.textContent = "||"; 
}

下面是按钮：

<div id="buttonbar"> 
<button id="restart" onclick="restart();">[]</button> 
<button id="rew" onclick="skip(-10)">&lt;&lt;</button> 
<button id="play" onclick="vidplay()">&gt;</button> 
<button id="fastFwd" onclick="skip(10)">&gt;&gt;</button> 
</div>

我的两美分的价值......

干杯

来源

2012-12-24 06:44:29

使用HTML5视频和Javascript的自定义控件的视频

回答

相关问题