uniapp 开发视频解析app

最近在插件市场看到一个视频解析的插件,挺感兴趣的,发现要99块钱,就自己研究了一下webview,发现实现起来也不难,我的实现思路是注入js文件拿到视频地址调用解析接口,实现播放,下面贴上代码,有兴趣的小伙伴可以研究下.

<template>
	<view>
		<web-view :src="src" @message="handleMessage"></web-view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				src:''
			}
		},
		// 标题栏input搜索框点击
		onNavigationBarSearchInputClicked: async function(e) {
			 var pages = getCurrentPages();  
			 var page = pages[pages.length - 1];  
			 var currentWebview = page.$getAppWebview();  
			 currentWebview.children()[0].getURL();  
			  const nw = currentWebview.children()[0]; 
			// var nw=plus.webview.create('http://m.weibo.cn/u/3196963860',{top:'46px',bottom:'0px'});
				
			
		},
		//点击导航栏 buttons 时触发
		onNavigationBarButtonTap(e) {
				uni.navigateTo({
				    url: '../index/index'
				});
		},
		onReady() {
			var pages = getCurrentPages();
			var page = pages[pages.length - 1];  
			var currentWebview = page.$getAppWebview();  
			currentWebview.children()[0].getURL();  
			 const nw = currentWebview.children()[0]; 
			nw.appendJsFile('hybrid/html/js/uni.webview.1.5.1.js');
			nw.appendJsFile('hybrid/html/js/jquery.min.js');
			nw.appendJsFile('hybrid/html/js/index.js');
			
			// nw.evalJS('alert("evalJS: "+location.href);');
		},
		onLoad: function (option) { 
			// this.src = this.src+'?src='+option.name;
			this.src = option.name;
		        console.log(this.src); //打印出上个页面传递的参数。
		    },
		methods: {
			 handleMessage(evt) {  
			                console.log('接收到的消息:' + JSON.stringify(evt.detail.data));  
			            }
		}
	}
</script>

<style>

</style>

 注入 的js页面


var div = document.createElement("div");
div.innerHTML = '<button id="test" style="position:fixed;right:0;top:170px;z-index: 9999;cursor: pointer;border-radius: 19px;color: rgba(0,0,0,0.5);background: #EEEEEE;height: 40px;padding: 5px 15px;">解析</button><br>';
div.style.textAlign="center";
document.body.insertBefore(div, document.body.firstElementChild);	
	if(window.location.host == 'm.iqiyi.com'){
			if((location.href).indexOf('.html') !== -1){
				$("#test").text('免费播放');
				$("#test").css('position','absolute');
			}
		}
	
		if(window.location.host == 'm.youku.com'){
				if((location.href).indexOf('.html') !== -1){
					$("#test").text('免费播放');
					$("#test").css('position','absolute');
				}
			}
			document.onreadystatechange = function () { 
				if(window.location.host == 'm.v.qq.com'){
			               if(document.readyState=="complete") {            
			                  	$("#test").text('解析插件加载成功');
			                  	$("#test").css('position','fixed');			                 													
			               } 
									}			 
			           } 
			$('body').click(function(){
				if(window.location.host == 'm.v.qq.com'){
					 if (window.history && window.history.pushState) {
					
					    $(window).on('popstate', function() {
					      var hashLocation = location.hash;
					      var hashSplit = hashLocation.split("#!/");
					      var hashName = hashSplit[1];
					
					      if (hashName !== '') {
					        var hash = window.location.hash;
					        if (hash === '') {
					          if((location.href).indexOf('play?') == -1 || (location.href).indexOf('cover') == -1 ){
					          	$("#test").text('解析插件加载成功');
					          	$("#test").css('position','fixed');
					          }
					        }
					      }
					    })}
							
						if((location.href).indexOf('play?') !== -1 || (location.href).indexOf('cover') !== -1 ){
							$("#test").text('解析费播放');
							$("#test").css('position','absolute');
						}
					}
			})
			
$("#test").click(function(){
	if(window.location.host == 'm.iqiyi.com'){
		if((location.href).indexOf('.html') !== -1){
			is_iqiyi();
		}

	}
	if(window.location.host == 'm.pptv.com'){
		if((location.href).indexOf('.html') !== -1){
			is_pp();
		}
		
		
	}
	if(window.location.host == 'm.youku.com'){
		if((location.href).indexOf('.html') !== -1){
			is_youku();
		}
		// 
	}
	if(window.location.host == 'm.v.qq.com'){
		if((location.href).indexOf('play?') !== -1 || (location.href).indexOf('cover') !== -1 ){
			is_qq();
		}
		
	}	
	});
function is_iqiyi(){
		var title = document.title;
		var img = $(".m-video-poster #player-posterimg").attr('src');
		pageTojiexi(title,location.href,img);
		
	}
	
function is_youku(){
		var title = $(".x-video-title").text();
		var img = $(".x-video-poster img").attr('src');
		pageTojiexi(title,location.href,img);
	}
 function is_qq(){
	 var title = $(".video_title").text()+$(".current .text").text();
	 var img = $(".player_poster img").attr('src');
	 pageTojiexi(title,location.href,img);
	 
 }
 function is_pp(){
 	 var title = $(".vod-tit-in h1").text()+$(".episodes-list .cur").text();
 	 pageTojiexi(title);
 	 
 }
 //跳转到解析页面
 function pageTojiexi(title,url=location.href,img){
	 //去除title中空格
	 var title =title.replace(/\s/g,"");
	 //对URL转码防止中文乱码
	 var title =encodeURIComponent(title);
	 var url =encodeURIComponent(url);
	 var img =encodeURIComponent(img);
	 // 跳转到解析界面
	 uni.navigateTo({
	                     url: '/pages/jiexi/jiexi?src='+url+"&title="+title+"&img="+img
	                 });
 }
$("#bd").bind('DOMNodeInserted', function(e) {
   alert('页面内容: ');  
});

这是做好的软件大家可以下载体验一下uniapp 开发视频解析apphttp://101.35.149.238/down

 

上一篇:MS COCO segmentation编码存储(RLE&polygon)


下一篇:segmentation fault 原因及解决方法