仿抖音，快手播放效果网页版及列表播放

最新推荐文章于 2024-03-31 09:39:02 发布

VIP文章 qqonly123456789

最新推荐文章于 2024-03-31 09:39:02 发布

阅读量3.2k

点赞数 1

文章标签： ios 小程序 html javascript dom

本文链接：https://blog.csdn.net/qqonly123456789/article/details/104140056

版权

转载于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"));//加入视频地址
    
});
/*   -------------------------------手势操作-------------------------------------   */

最低0.47元/天解锁文章

qqonly123456789

关注

1
点赞
踩
2

收藏

觉得还不错? 一键收藏
0
评论
仿抖音，快手播放效果网页版及列表播放

转载于video视频转成canvas（兼容至IE8+，全原生JS）解决浏览器兼容性，QQ浏览器篡改video标签的方法之一.源代码：<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="widt...
复制链接

扫一扫