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 })

 

 

一个好的例子（暂停，声音控制，快进，快放，重置，载入新视频）
  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" >&lt;&lt;</button>
138 <button id="play" title="Play button">&gt;</button>
139 <button id="fwd" title="Forward button" >&gt;&gt;</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>

 

posted @ 2017-01-19 13:52  ghfjj  阅读(1235)  评论(0)  编辑  收藏  举报