HTML5 practice and analysis of media elements (6, video examples)-H5 Tutorial-php.cn

HTML5 practice and analysis of media elements (6, video examples)

黄舟

Release： 2017-02-13 14:11:08

Original

1497 people have browsed it

The video tag in HTML5 and its effect of imitating a video player are widely used on some mobile phones. Because the mobile version has basically abolished the dictatorship of flash and allowed HTML5 to be the master, it has better support for videos. So today I will give you a small example of HTML5 video tag simulating a video player, so that you can better understand HTML5 and its effective application in projects.

　HTML code

<!-- src中放上本地的ogv的音频 -->
<video id="v1" src="Intermission-Walk-in.ogv"></video>
<p id="p1">
    <input type="button" value="播放" />
    <input type="button" value="00:00:00" />
    <input type="button" value="00:00:00" />
    <input type="button" value="静音" />
    <input type="button" value="全屏" />
</p>
<p id="p2">
    <p id="p3"></p>
</p>
 
<p id="p4">
    <p id="p5"></p>
</p>

Copy after login

　CSS Code

#p2{ width:300px; height:30px; background:#666666; position:relative;}
#p3{ width:30px; height:30px; background:red; position:absolute; left:0; top:0;}
#p4{ width:300px; height:20px; background:#666666; position:relative; top:10px;}
#p5{ width:20px; height:20px; background:yellow; position:absolute; right:0; top:0;}

Copy after login

JavaScript Code

100

101

102

103

104

105

106

107

108

109

110

111

112

113

114

115

116

117

118

119

120

121

122

123

124

125

126

127

128

129

130

131

132

133

134

135

136

137

138

139

140

141

142

143

144

145

146

147

148

149

150

151

152

153

154

155

156

157

window.onload = function(){
    var oV = document.getElementById(&#39;v1&#39;);
    var op = document.getElementById(&#39;p1&#39;);
    var aInput = op.getElementsByTagName(&#39;input&#39;);
     
    var op2 = document.getElementById(&#39;p2&#39;);
    var op3 = document.getElementById(&#39;p3&#39;);
    var op4 = document.getElementById(&#39;p4&#39;);
    var op5 = document.getElementById(&#39;p5&#39;);
     
    var timer = null;
     
    //播放暂停
    aInput[0].onclick = function(){
     
        if(oV.paused){
            this.value = &#39;暂停&#39;;
            oV.play();
            toShow();
            timer = setInterval(toShow,1000);
        }
        else{
            this.value = &#39;播放&#39;;
            oV.pause();
            clearInterval(timer);
        }
         
    };
     
    aInput[2].value = timeChange(oV.duration);
     
    function timeChange(iAll){
     
        iAll = Math.floor(iAll);
     
        var hours = toZero(parseInt(iAll/3600));
        var mintus = toZero(parseInt(iAll%3600/60));
        var sends = toZero(parseInt(iAll%60));
         
        return hours + ":" + mintus + ":" + sends;
     
    }
     
    function toZero(num){
        if(num<10){
            return &#39;0&#39; + num;
        }
        else{
            return &#39;&#39; + num;
        }
    }
     
    function toShow(){
        aInput[1].value = timeChange(oV.currentTime);
         
        var scale = oV.currentTime/oV.duration;
         
        op3.style.left = scale * (op2.offsetWidth - op3.offsetWidth) + &#39;px&#39;;
         
    }
     
    //静音
    aInput[3].onclick = function(){
        if(oV.muted){
            this.value = &#39;静音&#39;;
            oV.muted = false;
            op5.style.left = oV.volume*(op4.offsetWidth - op5.offsetWidth) + &#39;px&#39;;
        }
        else{
            this.value = &#39;消除静音&#39;;
            oV.muted = true;
            op5.style.left = 0;
        }
    };
     
    var disX = 0;
     
    //进度调整
    op3.onmousedown = function(ev){
        var ev = ev || window.event;
        disX = ev.clientX - op3.offsetLeft;
         
        document.onmousemove = function(ev){
            var ev = ev || window.event;
             
            var L = ev.clientX - disX;
             
            if(L<0){
                L = 0;
            }
            else if(L>op2.offsetWidth - op3.offsetWidth){
                L = op2.offsetWidth - op3.offsetWidth;
            }
             
            op3.style.left = L + &#39;px&#39;;
             
            var scale = L/(op2.offsetWidth - op3.offsetWidth);
             
            oV.currentTime = scale * oV.duration;
             
            toShow();
             
        };
        document.onmouseup = function(){
 
            aInput[0].value = &#39;暂停&#39;;
            oV.play();
            toShow();
            timer = setInterval(toShow,1000);
 
            document.onmousemove = null;
            document.onmouseup = null;
        };
        return false;
    };
     
    var disX2 = 0;
     
    //声音
    op5.onmousedown = function(ev){
        var ev = ev || window.event;
        disX2 = ev.clientX - op5.offsetLeft;
         
        document.onmousemove = function(ev){
            var ev = ev || window.event;
             
            var L = ev.clientX - disX2;
             
            if(L<0){
                L = 0;
            }
            else if(L>op4.offsetWidth - op5.offsetWidth){
                L = op4.offsetWidth - op5.offsetWidth;
            }
             
            op5.style.left = L + &#39;px&#39;;
             
            var scale = L/(op4.offsetWidth - op5.offsetWidth);  
             
            oV.volume = scale;
             
        };
        document.onmouseup = function(){
            document.onmousemove = null;
            document.onmouseup = null;
        };
        return false;
    };
     
    //全屏
    aInput[4].onclick = function(){
     
        oV.webkitRequestFullScreen();
     
    };
     
};

Copy after login

The above is the content of HTML5 actual combat and analysis of media elements (6. Video examples). For more related content, please pay attention to the PHP Chinese website (www.php.cn )!