联系我
分类: HTML/HTML5
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);
Cropit插件 html5截图插件 代码看得懂(易改)
来源:http://www.jq22.com/jquery-info6549
改裁剪大小
//210行 this.$preview = this.options.$preview.css('position', 'relative');
//改为
this.$preview = this.options.$preview.css({'position': 'relative',"height":"560px","width":"350px"});
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】有点小提示
html
required-【input】属性,不填写无法提交表单
css
color: pink !important; ——这里 !important 百分百只执行这条;
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/" -- 代表根目录,绝对路径。
hey dude.你想遇到手机就跳转到手机版网页吗
Baidu Site App的uaredirect.js应该能帮到你
<head>里面插入两行
/*
一二楼防吞*/
<script src="http://siteapp.baidu.com/static/webappservice/uaredirect.js" type="text/javascript" ></script>
<script type="text/javascript">uaredirect("手机版网址");</script >
手机网站宽度自动适应手机屏幕
方法一:
<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下横屏时宽度会超过屏幕宽度出现滚动条,解决方法就是加上方法一的代码
input默认内容点击自动消失(HTML)
<input type="text" name="username" id="username" class="login-input" placeholder="用户名">
使用<input>标签的placeholder属性
其内容在获得focus时消失