分享web开发知识

注册/登录|最近发布|今日推荐

主页 IT知识网页技术软件开发前端开发代码编程运营维护技术分享教程案例
当前位置：首页 > 技术分享

【轉】使用jQuery播放/暂停 HTML5视频

发布时间：2023-09-06 01:09责任编辑：沈小雨关键词：HTMLjQuery

jQuery不可以使用play()方法，但js是可以的：

document.getElementById(‘movie1‘).play();

解决方法：
play并不是jQuery的函数，而是DOM元素的函数，所以我们需要通过DOM来调用play，代码如下：

$(‘#videoId‘).get(0).play();

最简单的方法实现Play和Pause:

$(‘video‘).trigger(‘play‘);
$(‘video‘).trigger(‘pause‘)

点击视频就能播放和暂停

$("video").trigger("play");//for auto play
$("video").addClass(‘pause‘);//for check pause or play add a class
$(‘video‘).click(function() {
　　if($(this).hasClass(‘pause‘)) {
　　　　$("video").trigger("play");
　　　　$(this).removeClass(‘pause‘);
　　　　$(this).addClass(‘play‘);
　　}else{
　　　　$("video").trigger("pause");
　　　　$(this).removeClass(‘play‘);
　　　　$(this).addClass(‘pause‘);
　　}
})

静音和取消静音

$(‘body‘).find("video").attr(‘id‘,‘video‘)
var myVid = document.getElementById("video");
$(‘.sound-icon‘).click(function() {
　　//here "sound-icon" is a anchor class.
　　var sta = myVid.muted;
　　if(sta ==true) {
　　　　　　myVid.muted =false;
　　}else{
　　myVid.muted =true;
　　}
})

HTML 5中播放视频的方法：

<video width="640"height="360"src="http://www.youtube.com/demo/google_main.mp4"controls autobuffer>
<p> Trythispage in Safari4! Or you can
<a href="http://www.youtube.com/demo/google_main.mp4">download the video</a> instead.</p>
</video>

自动播放：

<video src="abc.mov"autoplay></video>

使用poster在视频无法加载时显示图片：

<video width="640"height="360"src="http://www.youtube.com/demo/google_main.mp"autobuffer controls poster="whale.png">
<p>Trythispage in Safari4! Or you can <a href="http://www.youtube.com/demo/google_main.mp4">download the video</a> instead.</p>
</video>

一个比较简洁的例子：

<script type="text/javascript">
　　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;
　　}
</script>
</head>
<body>
<video id="Video1">
// Replace these with your own video files.
　　<source src="demo.mp4"type="video/mp4"/>
　　<source src="demo.ogv"type="video/ogg"/>
　　HTML5 Video is requiredforthisexample.
　　<a href="demo.mp4">Download the video</a> file.
</video>
<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>


下面是一个比较完整的例子：

<html >
<head>
<title>Full player example</title>
<!-- Uncomment the following meta tagifyou have issues renderingthispage on an intranet or local site. -->
<!-- <meta http-equiv="X-UA-Compatible"content="IE=edge"/> -->
<script type="text/javascript">
　　function init() {// Master function, encapsulates all functions
　　　　var video = document.getElementById("Video1");
　　　　if(video.canPlayType) {// tests that we have HTML5 video support
　　　　// if successful, display buttons and set up events
　　　　　　document.getElementById("buttonbar").style.display ="block";
　　　　　　document.getElementById("inputField").style.display ="block";
　　　　　　// helper functions
　　　　　　// play video
　　　　　　function vidplay(evt) {
　　　　　　　　if(video.src =="") {// inital source load
　　　　　　　　getVideo();
　　　　　　}
　　　　　　button = evt.target;// get the button id to swap the text based on the state
　　　　　　if(video.paused) {// play the file, and display pause symbol
　　　　　　　　video.play();
　　　　　　　　button.textContent ="||";
　　　　　　}else{// pause the file, and display play symbol
　　　　　　　　video.pause();
　　　　　　　　button.textContent =">";
　　　　　　}
　　　　}
　　　　// load video file from input field
　　　　function getVideo() {
　　　　　　var fileURL = document.getElementById("videoFile").value;// get input field
　　　　　　if(fileURL !="") {
　　　　　　　　video.src = fileURL;
　　　　　　　　video.load();// if HTML source element is used
　　　　　　　　document.getElementById("play").click();// start play
　　　　　　}else{
　　　　　　　　errMessage("Enter a valid video URL");// fail silently
　　　　　　}
　　　　}
// button helper functions
// skip forward, backward, or restart
function setTime(tValue) {
// if no video is loaded, this throws an exception
try{
if(tValue ==0) {
video.currentTime = tValue;
}
else{
video.currentTime += tValue;
}
}catch(err) {
// errMessage(err) // show exception
errMessage("Video content might not be loaded");
}
}
// display an error message
function errMessage(msg) {
// displays an error message for 5 seconds then clears it
document.getElementById("errorMsg").textContent = msg;
setTimeout("document.getElementById(‘errorMsg‘).textContent=‘‘",5000);
}
// change volume based on incoming value
function setVol(value) {
var vol = video.volume;
vol += value;
// test for range 0 - 1 to avoid exceptions
if(vol >=0&& vol <=1) {
// if valid value, use it
video.volume = vol;
}else{
// otherwise substitute a 0 or 1
video.volume = (vol <0) ?0:1;
}
}
// button events
// Play
document.getElementById("play").addEventListener("click", vidplay,false);
// Restart
document.getElementById("restart").addEventListener("click", function () {
setTime(0);
},false);
// Skip backward 10 seconds
document.getElementById("rew").addEventListener("click", function () {
setTime(-10);
},false);
// Skip forward 10 seconds
document.getElementById("fwd").addEventListener("click", function () {
setTime(10);
},false);
// set src == latest video file URL
document.getElementById("loadVideo").addEventListener("click", getVideo,false);
// fail with message
video.addEventListener("error", function (err) {
errMessage(err);
},true);
// volume buttons
document.getElementById("volDn").addEventListener("click", function () {
setVol(-.1);// down by 10%
},false);
document.getElementById("volUp").addEventListener("click", function () {
setVol(.1);// up by 10%
},false);
// playback speed buttons
document.getElementById("slower").addEventListener("click", function () {
video.playbackRate -= .25;
},false);
document.getElementById("faster").addEventListener("click", function () {
video.playbackRate += .25;
},false);
document.getElementById("normal").addEventListener("click", function () {
video.playbackRate =1;
},false);
document.getElementById("mute").addEventListener("click", function (evt) {
if(video.muted) {

知识推荐

我的编程学习网——分享web前端后端开发技术知识。 垃圾信息处理邮箱 tousu563@163.com 网站地图
icp备案号 闽ICP备2023006418号-8 不良信息举报平台 互联网安全管理备案 Copyright 2023 www.wodecom.cn All Rights Reserved