h5 video 自定义播放进度条

来源:http://www.cnblogs.com/moqiutao/-风雨后见彩虹

// 为了不随意的创建全局变量,我们将我们的代码放在一个自己调用自己的匿名函数中,这是一个好的编程习惯
        (function(window, document){
            // 获取要操作的元素
            var video = document.getElementById("video");
            var videoControls = document.getElementById("videoControls");
            var videoContainer = document.getElementById("videoContainer");
            var controls = document.getElementById("video_controls");
            var playBtn = document.getElementById("playBtn");
            var fullScreenBtn = document.getElementById("fullScreenBtn");
            var progressWrap = document.getElementById("progressWrap");
            var playProgress = document.getElementById("playProgress");
            var fullScreenFlag = false;
            var progressFlag;

            // 创建我们的操作对象,我们的所有操作都在这个对象上。
            var videoPlayer = {
                init: function(){
                    var that = this;
                    video.removeAttribute("controls");
                    bindEvent(video, "loadeddata", videoPlayer.initControls);
                    videoPlayer.operateControls();
                },
                initControls: function(){
                    videoPlayer.showHideControls();
                },
                showHideControls: function(){
                    bindEvent(video, "mouseover", showControls);
                    bindEvent(videoControls, "mouseover", showControls);
                    bindEvent(video, "mouseout", hideControls);
                    bindEvent(videoControls, "mouseout", hideControls);
                },
                operateControls: function(){
                    bindEvent(playBtn, "click", play);
                    bindEvent(video, "click", play);
                    bindEvent(fullScreenBtn, "click", fullScreen);
                    bindEvent(progressWrap, "mousedown", videoSeek);
                }
            }

            videoPlayer.init();

            // 原生的JavaScript事件绑定函数
            function bindEvent(ele, eventName, func){
                if(window.addEventListener){
                    ele.addEventListener(eventName, func);
                }
                else{
                    ele.attachEvent('on' + eventName, func);
                }
            }
            // 显示video的控制面板
            function showControls(){
                videoControls.style.opacity = 1;
            }
            // 隐藏video的控制面板
            function hideControls(){
                // 为了让控制面板一直出现,我把videoControls.style.opacity的值改为1
                videoControls.style.opacity = 1;
            }
            // 控制video的播放
            function play(){
                if ( video.paused || video.ended ){              
                    if ( video.ended ){ 
                        video.currentTime = 0;
                        } 
                    video.play();
                    playBtn.innerHTML = "暂停"; 
                    progressFlag = setInterval(getProgress, 60);
                } 
                else{ 
                    video.pause(); 
                    playBtn.innerHTML = "播放";
                    clearInterval(progressFlag);
                } 
            }
            // 控制video是否全屏,额这一部分没有实现好,以后有空我会接着研究一下
            function fullScreen(){
                if(fullScreenFlag){
                    videoContainer.webkitCancelFullScreen();
                }
                else{
                    videoContainer.webkitRequestFullscreen();
                }
            }
            // video的播放条
            function getProgress(){
                var percent = video.currentTime / video.duration;
                playProgress.style.width = percent * (progressWrap.offsetWidth) - 2 + "px";
                showProgress.innerHTML = (percent * 100).toFixed(1) + "%";
            }
            // 鼠标在播放条上点击时进行捕获并进行处理
            function videoSeek(e){
                if(video.paused || video.ended){
                    play();
                    enhanceVideoSeek(e);
                }
                else{
                    enhanceVideoSeek(e);
                }

            }
            function enhanceVideoSeek(e){
                clearInterval(progressFlag);
                var length = e.pageX - progressWrap.offsetLeft;
                var percent = length / progressWrap.offsetWidth;
                playProgress.style.width = percent * (progressWrap.offsetWidth) - 2 + "px";
                video.currentTime = percent * video.duration;
                progressFlag = setInterval(getProgress, 60);
            }

        }(this, document))

 

canvas创建/图片和base64互转

部分参考自http://blog.csdn.net/renfufei/article/details/9855519

创建canvas

var canvas = document.createElement('canvas'); 
canvas.id     = "CursorLayer"; 
canvas.width  = 1224; 
canvas.height = 768; 
canvas.style.zIndex   = 8; 
canvas.style.position = "absolute"; 
canvas.style.border   = "1px solid";
document.body.appendChild(canvas);

图片转base64

// 把image 转换为 canvas对象  
function convertImageToCanvas(image) {  
    // 创建canvas DOM元素,并设置其宽高和图片一样   
    var canvas = document.createElement("canvas");  
    canvas.width = image.width;  
    canvas.height = image.height;  
    // 坐标(0,0) 表示从此处开始绘制,相当于偏移。  
    canvas.getContext("2d").drawImage(image, 0, 0);  
  
    return canvas;  
}

 

base64转图片

var fin = new Image();
    fin.src =  canvas.toDataURL("image/jpg");
document.body.appendChild(fin);

 

svg 图表-圆环

css

.chart-circle-bg{
	fill:none ;
	stroke:#E4EAF5 ;
	stroke-width:10;
	stroke-miterlimit:10;
	cx:100;
	cy:100;
	r:55.056;
		    
}
.chart-circle-line{
	fill:none;
	stroke-linecap: round;
	animation: spin 4s infinite linear;
	stroke-width:10;
	stroke-miterlimit:10;
}

js

<script>
$('input').bind('input propertychange', the_change);

function the_change(){
	var it = $(this);
	var css=($(this).attr("class"));
	var target=$(".chart-circle-line");
	var js_target=document.getElementsByClassName("chart-circle-line")[0].getBoundingClientRect();
	var h=js_target.height||Bottom - Top;
	var w=js_target.width||Right - Left;
	switch (css){
	case "ray":
		target.css("stroke-dasharray",it.val()/100*h*Math.PI+" "+it.val()/100*w*Math.PI)
		break;
	case "set":
		target.css("stroke-dashoffset",it.val()/100*h*Math.PI)
		break;
	}
}
</script>

html

<svg class="f3" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" x="0px" y="0px" width="200px" height="200px" viewBox="0 0 200 200" enable-background="new 0 0 200 200" xml:space="preserve">
<g >
	<circle class="chart-circle-bg" />
</g>
<defs class="">
		<linearGradient id="orange_red" x1="0%" y1="0%" x2="0%" y2="100%">
		<stop offset="0%" style="stop-color:#FF675C;stop-opacity:1"/>
		<stop offset="100%" style="stop-color:#FF325C;stop-opacity:1"/>
		</linearGradient>
	</defs>
<g >
	<path class="chart-circle-line" xmlns="http://www.w3.org/2000/svg"  
	stroke="url(#orange_red)" 	
	d="M100,44.944c30.407,0,55.056,24.649,55.056,55.056   c0,30.406-24.648,55.057-55.056,55.057c-30.406,0-55.056-24.65-55.056-55.057C44.944,69.593,69.594,44.944,100,44.944"
	/>
</g>
</svg>
<input class='ray' >
<input class='set' >

 

 

html 基础 绝对路径/相对路径

"." -- 代表目前所在的目录,相对路径。 如:<a href="./abc">文本</a> 或 <img src="./abc" />
".." -- 代表上一层目录,相对路径。 如:<a href="../abc">文本</a> 或 <img src="../abc" />
"../../" -- 代表的是上一层目录的上一层目录,相对路径。 如:<img src="../../abc" />
"/" -- 代表根目录,绝对路径。 如:<a href="/abc">文本</a> 或 <img src="/abc" />
"http://localhost/abc/" -- 代表根目录,绝对路径。

手机网站宽度自动适应手机屏幕

原文地址

方法一:

<meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=0.5, maximum-scale=2.0, user-scalable=yes" />

在网页的<head>中增加以上这句话,可以让网页的宽度自动适应手机屏幕的宽度。

其中:

width=device-width :表示宽度是设备屏幕的宽度

initial-scale=1.0:表示初始的缩放比例

minimum-scale=0.5:表示最小的缩放比例

maximum-scale=2.0:表示最大的缩放比例

user-scalable=yes:表示用户是否可以调整缩放比例

如果是想要一打开网页,则自动以原始比例显示,并且不允许用户修改的话,则是:

<meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no" />

方法二:

把这段

<!DOCTYPE ........>

替换为这段

<!DOCTYPE html PUBLIC "-//WAPFORUM//DTD XHTML Mobile 1.0//EN" "http://www.wapforum.org/DTD/xhtml-mobile10.dtd">

注:此方法在iPhone下横屏时宽度会超过屏幕宽度出现滚动条,解决方法就是加上方法一的代码