video
This commit is contained in:
@@ -1,11 +1,7 @@
|
|||||||
<template>
|
<template>
|
||||||
<view class="container" style="background-color: #fff; position: relative">
|
<view class="container" style="background-color: #fff; position: relative">
|
||||||
<!-- <web-view style="height: 200px" src="https://www.tmrjournals.com/aliplayer.html"></web-view> -->
|
<!-- <web-view style="height: 200px" src="https://www.tmrjournals.com/aliplayer.html"></web-view> -->
|
||||||
<web-view
|
<web-view v-if="isSetFirstTime"></web-view>
|
||||||
|
|
||||||
|
|
||||||
></web-view>
|
|
||||||
<button class="button" @click="evalJs">evalJs(改变webview背景颜色)</button>
|
|
||||||
</view>
|
</view>
|
||||||
</template>
|
</template>
|
||||||
<script>
|
<script>
|
||||||
@@ -154,10 +150,9 @@ export default {
|
|||||||
});
|
});
|
||||||
},
|
},
|
||||||
handlePostMessage(res) {
|
handlePostMessage(res) {
|
||||||
this.$nextTick(()=>{
|
this.$nextTick(() => {
|
||||||
this.$refs.webview.handleMessage();
|
this.$refs.webview.handleMessage();
|
||||||
})
|
});
|
||||||
|
|
||||||
},
|
},
|
||||||
getMessage(e) {
|
getMessage(e) {
|
||||||
uni.showModal({
|
uni.showModal({
|
||||||
@@ -165,27 +160,26 @@ export default {
|
|||||||
showCancel: false,
|
showCancel: false,
|
||||||
});
|
});
|
||||||
},
|
},
|
||||||
|
initWebView() {
|
||||||
async init(data, isChange) {
|
|
||||||
let wv = plus.webview.create(
|
let wv = plus.webview.create(
|
||||||
'/static/html/aliplayer.html?',//date保证不走缓存
|
"/static/html/aliplayer.html?", //date保证不走缓存
|
||||||
'batch_view',
|
"batch_view",
|
||||||
{
|
{
|
||||||
top: '0',
|
top: "0",
|
||||||
left: '0',
|
left: "0",
|
||||||
height: '100%',
|
height: "100%",
|
||||||
width: '100%'
|
width: "100%",
|
||||||
|
},
|
||||||
|
{
|
||||||
|
data: {
|
||||||
|
videoData:this.videoData,
|
||||||
},
|
},
|
||||||
{
|
}
|
||||||
data: {
|
); //不用data键值对的方式传的话，h5接收后会是多个字段，而非一个对象
|
||||||
token: '2222',
|
let currentWebview = this.$mp.page.$getAppWebview();
|
||||||
userInfo: '44444',
|
currentWebview.append(wv); //重要，否则会失效
|
||||||
implantType: 'uniapp'
|
},
|
||||||
}
|
async init(data, isChange) {
|
||||||
}) //不用data键值对的方式传的话，h5接收后会是多个字段，而非一个对象
|
|
||||||
let currentWebview = this.$mp.page.$getAppWebview()
|
|
||||||
currentWebview.append(wv);//重要，否则会失效
|
|
||||||
|
|
||||||
this.platform = this.$platform;
|
this.platform = this.$platform;
|
||||||
this.isfresh = true;
|
this.isfresh = true;
|
||||||
console.log("at line 59:", "是否先走init这里", this.platform);
|
console.log("at line 59:", "是否先走init这里", this.platform);
|
||||||
@@ -200,7 +194,7 @@ export default {
|
|||||||
// await this.getVideo(isChange);
|
// await this.getVideo(isChange);
|
||||||
// this.$emit("child-event", this.timer);
|
// this.$emit("child-event", this.timer);
|
||||||
},
|
},
|
||||||
|
|
||||||
async getData(data, isChange) {
|
async getData(data, isChange) {
|
||||||
var that = this;
|
var that = this;
|
||||||
if (!this.isSetFirstTime) {
|
if (!this.isSetFirstTime) {
|
||||||
@@ -244,8 +238,10 @@ export default {
|
|||||||
// }
|
// }
|
||||||
console.log(this.firstTime, "这是第一次播放时长");
|
console.log(this.firstTime, "这是第一次播放时长");
|
||||||
}
|
}
|
||||||
|
|
||||||
this.isSetFirstTime = true;
|
this.isSetFirstTime = true;
|
||||||
|
|
||||||
|
await this.initWebView();
|
||||||
},
|
},
|
||||||
async playVideo(e) {
|
async playVideo(e) {
|
||||||
this.videoContext = uni.createVideoContext("videoId", this);
|
this.videoContext = uni.createVideoContext("videoId", this);
|
||||||
|
|||||||
@@ -1,95 +1,92 @@
|
|||||||
<!DOCTYPE html>
|
<!DOCTYPE html>
|
||||||
<html>
|
<html>
|
||||||
<head>
|
|
||||||
<meta charset="utf-8" />
|
|
||||||
<meta name="viewport" content="width=device-width, initial-scale=1">
|
|
||||||
<title>本地网页</title>
|
|
||||||
<style type="text/css">
|
|
||||||
.btn {
|
|
||||||
display: block;
|
|
||||||
margin: 20px auto;
|
|
||||||
padding: 5px;
|
|
||||||
background-color: #007aff;
|
|
||||||
border: 0;
|
|
||||||
color: #ffffff;
|
|
||||||
height: 40px;
|
|
||||||
width: 200px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.btn-red {
|
<head>
|
||||||
background-color: #dd524d;
|
<meta charset="utf-8">
|
||||||
}
|
<meta http-equiv="x-ua-compatible" content="IE=edge">
|
||||||
|
<meta name="viewport"
|
||||||
|
content="width=device-width, height=device-height, initial-scale=1, maximum-scale=1, minimum-scale=1, user-scalable=no" />
|
||||||
|
<title>Aliplayer Online Settings</title>
|
||||||
|
<script type="text/javascript" src="https://unpkg.com/@dcloudio/uni-webview-js@0.0.1/index.js"></script>
|
||||||
|
|
||||||
.btn-yellow {
|
<script type="text/javascript" src="https://js.cdn.aliyun.dcloud.net.cn/dev/uni-app/uni.webview.1.5.1.js"></script>
|
||||||
background-color: #f0ad4e;
|
|
||||||
}
|
|
||||||
|
|
||||||
.desc {
|
<script src="./vue.js"></script>
|
||||||
padding: 10px;
|
<!-- <script src="./textData.js"></script> -->
|
||||||
color: #999999;
|
|
||||||
}
|
|
||||||
</style>
|
|
||||||
</head>
|
|
||||||
<body>
|
|
||||||
<p class="desc">web-view 组件加载本地 html 示例，仅在 App 环境下生效。点击下列按钮，跳转至其它页面。</p>
|
|
||||||
<div class="btn-list">
|
|
||||||
<button class="btn" type="button" data-action="navigateTo">navigateTo</button>
|
|
||||||
<button class="btn" type="button" data-action="redirectTo">redirectTo</button>
|
|
||||||
<button class="btn" type="button" data-action="navigateBack">navigateBack</button>
|
|
||||||
<button class="btn" type="button" data-action="reLaunch">reLaunch</button>
|
|
||||||
<button class="btn" type="button" data-action="switchTab">switchTab</button>
|
|
||||||
</div>
|
|
||||||
<p class="desc" id="lizhao">网页向应用发送消息。注意：小程序端应用会在此页面后退时接收到消息。</p>
|
|
||||||
<div class="btn-list">
|
|
||||||
<button class="btn btn-red" type="button" id="postMessage">postMessage</button>
|
|
||||||
</div>
|
|
||||||
<!-- uni 的 SDK -->
|
|
||||||
<script type="text/javascript" src="https://unpkg.com/@dcloudio/uni-webview-js@0.0.1/index.js"></script>
|
|
||||||
<script type="text/javascript">
|
|
||||||
|
|
||||||
window.handleMessage=function(data){
|
|
||||||
alert('传来的参数'+data)
|
|
||||||
}
|
|
||||||
document.addEventListener('UniAppJSBridgeReady', function() {
|
|
||||||
const data = plus.webview.getWebviewById("batch_view").data;//上传时最后一个参数
|
|
||||||
console.log('这是app传参数进来的',data.token,'22222222')
|
|
||||||
document.querySelector('.btn-list').addEventListener('click', function(evt) {
|
|
||||||
var target = evt.target;
|
|
||||||
if (target.tagName === 'BUTTON') {
|
|
||||||
var action = target.getAttribute('data-action');
|
|
||||||
switch (action) {
|
|
||||||
case 'switchTab':
|
|
||||||
uni.switchTab({
|
|
||||||
url: '/pages/tabBar/API/API'
|
|
||||||
});
|
|
||||||
break;
|
|
||||||
case 'reLaunch':
|
|
||||||
uni.reLaunch({
|
|
||||||
url: '/pages/tabBar/API/API'
|
|
||||||
});
|
|
||||||
break;
|
|
||||||
case 'navigateBack':
|
|
||||||
uni.navigateBack({
|
|
||||||
delta: 1
|
|
||||||
});
|
|
||||||
break;
|
|
||||||
default:
|
|
||||||
uni[action]({
|
|
||||||
url: '/pages/component/button/button'
|
|
||||||
});
|
|
||||||
break;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
});
|
|
||||||
document.querySelector("#postMessage").addEventListener('click', function() {
|
|
||||||
uni.postMessage({
|
|
||||||
data: {
|
|
||||||
action: 'message888888'
|
|
||||||
}
|
|
||||||
});
|
|
||||||
})
|
|
||||||
});
|
|
||||||
</script>
|
|
||||||
</body>
|
|
||||||
</html>
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
<script>
|
||||||
|
var viewWidth = window.screen.width;
|
||||||
|
if (viewWidth < 768) {
|
||||||
|
//document.write('<meta name="viewport" content="width=device-width,initial-scale=1, minimum-scale=1.0, maximum-scale=1, user-scalable=no, minimal-ui">');
|
||||||
|
} else {
|
||||||
|
document.write('<style>@media screen and (min-width: 768px) and (max-width: 1199px) {html {zoom: 0.8;}}</style>');
|
||||||
|
}
|
||||||
|
</script>
|
||||||
|
<link rel="stylesheet"
|
||||||
|
href="https://g.alicdn.com/apsara-media-box/imp-web-player/2.24.1/skins/default/aliplayer-min.css" />
|
||||||
|
<script type="text/javascript" charset="utf-8"
|
||||||
|
src="https://g.alicdn.com/apsara-media-box/imp-web-player/2.24.1/aliplayer-min.js"></script>
|
||||||
|
</head>
|
||||||
|
|
||||||
|
<body>
|
||||||
|
<div id="app">
|
||||||
|
<div class="prism-player" id="player-con" style="width: 100%;height: 200px;"></div>
|
||||||
|
|
||||||
|
</div>
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
</body>
|
||||||
|
<script type="text/javascript">
|
||||||
|
// 在引用依赖的文件后，需要在 HTML 中监听 UniAppJSBridgeReady 事件触发后，才能安全调用 uni 的 API。
|
||||||
|
document.addEventListener('UniAppJSBridgeReady', function () {
|
||||||
|
uni.getEnv(function (res) {
|
||||||
|
console.log('获取当前环境：' + JSON.stringify(res));
|
||||||
|
});
|
||||||
|
|
||||||
|
const data = plus.webview.getWebviewById("batch_view").data;//上传时最后一个参数
|
||||||
|
app.videoData = data.videoData
|
||||||
|
console.log('这是app传参数进来的', JSON.stringify(data.videoData), 'videoData')
|
||||||
|
|
||||||
|
});
|
||||||
|
|
||||||
|
// HTML 接受APP发送过来的消息 (H5端)
|
||||||
|
window.addEventListener('message', e => {
|
||||||
|
console.log(e, 'HTML 接受APP发送过来的消息 (H5端)');
|
||||||
|
app.dataList = JSON.parse(e.data.data).navigation
|
||||||
|
console.log(app.dataList, '+++++++++');
|
||||||
|
}, false)
|
||||||
|
|
||||||
|
|
||||||
|
// HTML 接受APP发送过来的消息 (APP端)
|
||||||
|
function requestData(data) {
|
||||||
|
console.log(JSON.stringify(data), 'HTML 接受APP发送过来的消息 (APP端)');
|
||||||
|
app.dataList = data.navigation // 赋值
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
var app = new Vue({
|
||||||
|
el: '#app',
|
||||||
|
data: {
|
||||||
|
textTip: "提示信息",
|
||||||
|
dataList: [],
|
||||||
|
videoData: {},
|
||||||
|
},
|
||||||
|
mounted() {
|
||||||
|
|
||||||
|
},
|
||||||
|
onLoad() {
|
||||||
|
|
||||||
|
},
|
||||||
|
onShow() {
|
||||||
|
|
||||||
|
},
|
||||||
|
methods: {
|
||||||
|
}
|
||||||
|
})
|
||||||
|
|
||||||
|
</script>
|
||||||
97
static/html/aliplayerOk.html
Normal file
97
static/html/aliplayerOk.html
Normal file
@@ -0,0 +1,97 @@
|
|||||||
|
<!DOCTYPE html>
|
||||||
|
<html>
|
||||||
|
|
||||||
|
<head>
|
||||||
|
<meta charset="utf-8" />
|
||||||
|
<meta name="viewport" content="width=device-width, initial-scale=1">
|
||||||
|
<title>本地网页</title>
|
||||||
|
<style type="text/css">
|
||||||
|
.btn {
|
||||||
|
display: block;
|
||||||
|
margin: 20px auto;
|
||||||
|
padding: 5px;
|
||||||
|
background-color: #007aff;
|
||||||
|
border: 0;
|
||||||
|
color: #ffffff;
|
||||||
|
height: 40px;
|
||||||
|
width: 200px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.btn-red {
|
||||||
|
background-color: #dd524d;
|
||||||
|
}
|
||||||
|
|
||||||
|
.btn-yellow {
|
||||||
|
background-color: #f0ad4e;
|
||||||
|
}
|
||||||
|
|
||||||
|
.desc {
|
||||||
|
padding: 10px;
|
||||||
|
color: #999999;
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
</head>
|
||||||
|
|
||||||
|
<body>
|
||||||
|
<p class="desc">web-view 组件加载本地 html 示例，仅在 App 环境下生效。点击下列按钮，跳转至其它页面。</p>
|
||||||
|
<div class="btn-list">
|
||||||
|
<button class="btn" type="button" data-action="navigateTo">navigateTo</button>
|
||||||
|
<button class="btn" type="button" data-action="redirectTo">redirectTo</button>
|
||||||
|
<button class="btn" type="button" data-action="navigateBack">navigateBack</button>
|
||||||
|
<button class="btn" type="button" data-action="reLaunch">reLaunch</button>
|
||||||
|
<button class="btn" type="button" data-action="switchTab">switchTab</button>
|
||||||
|
</div>
|
||||||
|
<p class="desc" id="lizhao">网页向应用发送消息。注意：小程序端应用会在此页面后退时接收到消息。</p>
|
||||||
|
<div class="btn-list">
|
||||||
|
<button class="btn btn-red" type="button" id="postMessage">postMessage</button>
|
||||||
|
</div>
|
||||||
|
<!-- uni 的 SDK -->
|
||||||
|
<script type="text/javascript" src="https://unpkg.com/@dcloudio/uni-webview-js@0.0.1/index.js"></script>
|
||||||
|
<script type="text/javascript">
|
||||||
|
|
||||||
|
window.handleMessage = function (data) {
|
||||||
|
alert('传来的参数' + data)
|
||||||
|
}
|
||||||
|
document.addEventListener('UniAppJSBridgeReady', function () {
|
||||||
|
const data = plus.webview.getWebviewById("batch_view").data;//上传时最后一个参数
|
||||||
|
console.log('这是app传参数进来的', data.token, '22222222')
|
||||||
|
document.querySelector('.btn-list').addEventListener('click', function (evt) {
|
||||||
|
var target = evt.target;
|
||||||
|
if (target.tagName === 'BUTTON') {
|
||||||
|
var action = target.getAttribute('data-action');
|
||||||
|
switch (action) {
|
||||||
|
case 'switchTab':
|
||||||
|
uni.switchTab({
|
||||||
|
url: '/pages/tabBar/API/API'
|
||||||
|
});
|
||||||
|
break;
|
||||||
|
case 'reLaunch':
|
||||||
|
uni.reLaunch({
|
||||||
|
url: '/pages/tabBar/API/API'
|
||||||
|
});
|
||||||
|
break;
|
||||||
|
case 'navigateBack':
|
||||||
|
uni.navigateBack({
|
||||||
|
delta: 1
|
||||||
|
});
|
||||||
|
break;
|
||||||
|
default:
|
||||||
|
uni[action]({
|
||||||
|
url: '/pages/component/button/button'
|
||||||
|
});
|
||||||
|
break;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
});
|
||||||
|
document.querySelector("#postMessage").addEventListener('click', function () {
|
||||||
|
uni.postMessage({
|
||||||
|
data: {
|
||||||
|
action: 'message888888'
|
||||||
|
}
|
||||||
|
});
|
||||||
|
})
|
||||||
|
});
|
||||||
|
</script>
|
||||||
|
</body>
|
||||||
|
|
||||||
|
</html>
|
||||||
Reference in New Issue
Block a user