video控制详细
http://www.w3school.com.cn/HTML5/html_5_video_dom.asp
我尝试用jQuery控制HTML5视频,两个视频分别在两个tab中,我希望点中tab后,该tab里的视频可以立即播放,而另外tab里的视频能够停止。
我的代码是这样的:
我的代码是这样的:
1 $('#playMovie1').click(function(){ 2 $('#movie1').play(); 3 });
但发现这样不行,而用以下的js是可以的:
document.getElementById('movie1').play();
解决方法:
play并不是jQuery的函数,而是DOM元素的函数,所以我们需要通过DOM来调用play,代码如下:
$('#videoId').get(0).play();
最简单的方法实现Play和Pause:
1 $('video').trigger('play'); 2 $('video').trigger('pause');
点击视频就能播放和暂停:
1 $("video").trigger("play");//for auto play 2 $("video").addClass('pause');//for check pause or play add a class 3 $('video').click(function() { 4 if ($(this).hasClass('pause')) { 5 $("video").trigger("play"); 6 $(this).removeClass('pause'); 7 $(this).addClass('play'); 8 } else { 9 $("video").trigger("pause"); 10 $(this).removeClass('play'); 11 $(this).addClass('pause'); 12 } 13 })
监听播放事件:
var init_num=0;
var myvideo=document.getElementById('myvideo');
myvideo.setAttribute("src",videoUrl);
myvideo.addEventListener('play',function(){
if(init_num==0){
init_num++;
videoPlayNum(videoID);
}
});
音频播放完成后弹出提示信息:
var aud = document.getElementById("myAudio");
aud.onended = function() {
alert("音频播放完成");
};
静音和取消静音:
1 $('body').find("video").attr('id', 'video') 2 var myVid = document.getElementById("video"); 3 $('.sound-icon').click(function() { 4 //here "sound-icon" is a anchor class. 5 var sta = myVid.muted; 6 if (sta == true) { 7 myVid.muted = false; 8 } else { 9 myVid.muted = true; 10 } 11 })
HTML 5中播放视频的方法:
<video src="iefans.net.mp4" width="320" height="200" controls preload poster="images/video_poster.jpg"></video>
自动播放:
<video src="abc.mov" autoplay></video>
视频时长:
1 <html> 2 <meta charset="utf-8"> 3 <body> 4 <video id="aa" controls oncanplaythrough="myFunction()"> 5 <source src="video1.mp4" type="video/mp4"> 6 </video> 7 <p id="demo"><p> 8 <script> 9 var a=document.getElementById("aa"); 10 function myFunction() { 11 document.getElementById("demo").innerHTML="视频时长:"+a.duration+"秒"; 12 } 13 </script> 14 </body> 15 </html>
---实现了获取时长
1 function video_time(video,text){ 2 3 var time=$(video).get(0).duration; 4 $(text).html("视频时长:"+time+"秒"); 5 6 } 7 $(function(){ 8 var time=setInterval(time_fnc,200); 9 function time_fnc(){ 10 if($('#aa').get(0).readyState>0){video_time('#aa','#aaa'); } 11 clearInterval(time); 12 } 13 14 15 })
一个好的例子(暂停,声音控制,快进,快放,重置,载入新视频)
![](https://images2015.cnblogs.com/blog/722584/201701/722584-20170119135133484-1711766777.png)
1 <html > 2 <head> 3 <title>Full player example</title> 4 <!-- Uncomment the following meta tag if you have issues rendering this page on an intranet or local site. --> 5 <!-- <meta http-equiv="X-UA-Compatible" content="IE=edge"/> --> 6 <script type="text/javascript"> 7 function init() { // Master function, encapsulates all functions 8 var video = document.getElementById("Video1"); 9 if (video.canPlayType) { // tests that we have HTML5 video support 10 // if successful, display buttons and set up events 11 document.getElementById("buttonbar").style.display = "block"; 12 document.getElementById("inputField").style.display = "block"; 13 // helper functions 14 // play video 15 function vidplay(evt) { 16 if (video.src == "") { // inital source load 17 getVideo(); 18 } 19 button = evt.target; // get the button id to swap the text based on the state 20 if (video.paused) { // play the file, and display pause symbol 21 video.play(); 22 button.textContent = "||"; 23 } else { // pause the file, and display play symbol 24 video.pause(); 25 button.textContent = ">"; 26 } 27 } 28 // load video file from input field 29 function getVideo() { 30 var fileURL = document.getElementById("videoFile").value; // get input field 31 if (fileURL != "") { 32 video.src = fileURL; 33 video.load(); // if HTML source element is used 34 document.getElementById("play").click(); // start play 35 } else { 36 errMessage("Enter a valid video URL"); // fail silently 37 } 38 } 39 40 // button helper functions 41 // skip forward, backward, or restart 42 function setTime(tValue) { 43 // if no video is loaded, this throws an exception 44 try { 45 if (tValue == 0) { 46 video.currentTime = tValue; 47 } 48 else { 49 video.currentTime += tValue; 50 } 51 52 } catch (err) { 53 // errMessage(err) // show exception 54 errMessage("Video content might not be loaded"); 55 } 56 } 57 // display an error message 58 function errMessage(msg) { 59 // displays an error message for 5 seconds then clears it 60 document.getElementById("errorMsg").textContent = msg; 61 setTimeout("document.getElementById('errorMsg').textContent=''", 5000); 62 } 63 // change volume based on incoming value 64 function setVol(value) { 65 var vol = video.volume; 66 vol += value; 67 // test for range 0 - 1 to avoid exceptions 68 if (vol >= 0 && vol <= 1) { 69 // if valid value, use it 70 video.volume = vol; 71 } else { 72 // otherwise substitute a 0 or 1 73 video.volume = (vol < 0) ? 0 : 1; 74 } 75 } 76 // button events 77 // Play 78 document.getElementById("play").addEventListener("click", vidplay, false); 79 // Restart 80 document.getElementById("restart").addEventListener("click", function () { 81 setTime(0); 82 }, false); 83 // Skip backward 10 seconds 84 document.getElementById("rew").addEventListener("click", function () { 85 setTime(-10); 86 }, false); 87 // Skip forward 10 seconds 88 document.getElementById("fwd").addEventListener("click", function () { 89 setTime(10); 90 }, false); 91 // set src == latest video file URL 92 document.getElementById("loadVideo").addEventListener("click", getVideo, false); 93 // fail with message 94 video.addEventListener("error", function (err) { 95 errMessage(err); 96 }, true); 97 // volume buttons 98 document.getElementById("volDn").addEventListener("click", function () { 99 setVol(-.1); // down by 10% 100 }, false); 101 document.getElementById("volUp").addEventListener("click", function () { 102 setVol(.1); // up by 10% 103 }, false); 104 // playback speed buttons 105 document.getElementById("slower").addEventListener("click", function () { 106 video.playbackRate -= .25; 107 }, false); 108 document.getElementById("faster").addEventListener("click", function () { 109 video.playbackRate += .25; 110 }, false); 111 document.getElementById("normal").addEventListener("click", function () { 112 video.playbackRate = 1; 113 }, false); 114 document.getElementById("mute").addEventListener("click", function (evt) { 115 if (video.muted) { 116 video.muted = false; 117 evt.target.innerHTML = "<img alt='volume on button' src='vol2.png' />" 118 } else { 119 video.muted = true; 120 evt.target.innerHTML = "<img alt='volume off button' src='mute2.png' />" 121 } 122 }, false); 123 } // end of runtime 124 }// end of master 125 </script> 126 127 </head> 128 <body onload="init();" > 129 130 <video id="Video1" controls style="border: 1px solid blue;" height="240" width="320" title="video element"> 131 HTML5 Video is required for this example 132 </video> 133 134 <div id="buttonbar" style="display: none;")> 135 <button id="restart" title="Restart button">[]</button> 136 <button id="slower" title="Slower playback button">-</button> 137 <button id="rew" title="Rewind button" ><<</button> 138 <button id="play" title="Play button">></button> 139 <button id="fwd" title="Forward button" >>></button> 140 <button id="faster" title="Faster playback button">+</button> 141 <button id="Button2" title="Mute button" ><img alt="Volume on button" src="vol2.png" /></button> 142 <br /> 143 <label>Playback </label> 144 <label>Reset playback rate: </label><button id="normal" title="Reset playback rate button">=</button> 145 146 <label> Volume </label> 147 <button id="volDn" title="Volume down button">-</button> 148 <button id="volUp" title="Volume up button">+</button> 149 <button id="mute" title="Mute button" ><img alt="Volume on button" src="vol2.png" /></button> 150 </div> 151 <br/> 152 <div id= "inputField" style="display:none;" > 153 <label>Type or paste a video URL: <br/> 154 <input type="text" id="videoFile" style="width: 300px;" title="video file input field" value="http://ie.microsoft.com/testdrive/ieblog/2011/nov/pp4_blog_demo.mp4" /> 155 <button id="loadVideo" title="Load video button" >Load</button> 156 </label> 157 </div> 158 <div title="Error message area" id="errorMsg" style="color:Red;"></div> 159 </body> 160 </html>