• 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=" 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>
  • 相关阅读:
    Cookie天使还是恶魔?
    Nhibernate学习起步之manytoone篇
    共享终结者ShareKiller
    基于弹性碰撞原理的抖动式窗口
    Nhibernate分析之华山论剑篇
    Nhibernate学习之manytomany篇
    JavaScript常用字符串函数
    让全中国人蒙羞的搜索爬虫
    近期项目的一些代码总结
    Nhibernate学习之性能改善1
  • 原文地址:https://www.cnblogs.com/ghfjj/p/6306331.html
Copyright © 2020-2023  润新知