最近在插件市场看到一个视频解析的插件,挺感兴趣的,发现要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('页面内容: ');
});
这是做好的软件大家可以下载体验一下http://101.35.149.238/down