转载于video视频转成canvas(兼容至IE8+,全原生JS)
解决浏览器兼容性,QQ浏览器篡改video标签的方法之一.
源代码:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no, minimum-scale=1.0, maximum-scale=1.0"/>
<title>Document</title>
<style type="text/css">
*{
margin:0px;
padding:0px;
}
body,html{
height:100%;/*background-color:#000*/}
li{
list-style:none;
}
.page{
width:100%;
height:10%;
/*background-color:#fdfdfd;*/
}
#aa,video{
width:100%;
height:100%;
background:blue;
margin: 0px auto;
text-align: center;
position: absolute;
top: 0;
z-index: -1;
}
#wrap{
width:100%;
height:100%;
overflow:hidden
}
/*ul{transform: translateY(0)!important;}*/
ul{
touch-action: pan-y;/*启用单指垂直平移手势*/
}
#wrap2{
width:100%;
height:1000%;
}
#video{
/*display: none;*/
}
</style>
</head>
<body>
<div class="wrap" id="wrap">
<ul class="wrap2" id="wrap2">
<li class="page" value="/%E6%90%9E%E7%AC%91.mp4" title="进球瞬间">1</li>
<li class="page" value="/%E6%90%9E%E7%AC%91.mp4" title="胜利庆祝">2</li>
<li class="page" value="/IMG_8306.MP4" title="进球瞬间">3</li>
<li class="page" value="/%E6%90%9E%E7%AC%91.mp4" title="胜利庆祝">4</li>
<li class="page" value="/IMG_8306.MP4" title="进球瞬间">5</li>
<li class="page" value="/%E6%90%9E%E7%AC%91.mp4" title="胜利庆祝">6</li>
<li class="page">7</li>
</ul>
</div>
<div id="aa">
<video controls="controls" id="video" autoplay="autoplay" src="http://www.w3school.com.cn/example/html5/mov_bbb.mp4" poster="" height="500px" width="500px" x5-playsinline="true" x5-video-player-type="h5-page" x-webkit-airplay="allow" x5-video-player-fullscreen="true" playsinline="true" webkit-playsinline="true" ></video>
<script src="./js/jquery.min.js"></script>
</div>
<!--<div id="dylist">
<div class="play">播放</div>
<div class="pause">暂停</div>
<div class="playPause">播放或暂停视频</div>
<div class="change-src">切换视频</div>
</div>-->
<script type="text/javascript">
/*
* video视频转成canvas(兼容至IE8+)
* Author: Zijor Created On: 2017-06-25
*
* 使用方法:
* var videoCanvas = new VideoToCanvas(videoDom);
*
* 对象的属性:
* 暂无。
*
* 对象的方法:
* play 播放视频
* pause 暂停视频
* playPause 播放或暂停视频
* change(src) 切换视频。参数src为切换的视频地址
*/
//javascript加载属性:
let sH = document.documentElement.scrollHeight || document.body.scrollHeight;
var lis = document.getElementsByTagName("li");
var wrap2 =document.getElementById("wrap2");
var lis_n = "0";
$('.change-src').on(window.onload = function(){
videoCanvas.change(lis[lis_n].getAttribute("value"));//加入视频地址
});
/* -------------------------------手势操作-----------------------------