zm/sociology_app
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

video

Browse Source
This commit is contained in:
始于初见
2024-07-17 15:39:51 +08:00
parent 78820169ff
commit a3667d1fc1
3 changed files with 209 additions and 119 deletions
Download Patch File Download Diff File Expand all files Collapse all files

56
pages/component/commonComponents/video/ios.nvue
View File

@@ -1,11 +1,7 @@
<template>
<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
></web-view>
<button class="button" @click="evalJs">evalJs(改变webview背景颜色)</button>
<web-view v-if="isSetFirstTime"></web-view>
</view>
</template>
<script>
@@ -154,10 +150,9 @@ export default {
});
},
handlePostMessage(res) {
this.$nextTick(()=>{
this.$refs.webview.handleMessage();
})
this.$nextTick(() => {
this.$refs.webview.handleMessage();
});
},
getMessage(e) {
uni.showModal({
@@ -165,27 +160,26 @@ export default {
showCancel: false,
});
},
async init(data, isChange) {
initWebView() {
let wv = plus.webview.create(
'/static/html/aliplayer.html?',//date保证不走缓存
'batch_view',
{
top: '0',
left: '0',
height: '100%',
width: '100%'
"/static/html/aliplayer.html?", //date保证不走缓存
"batch_view",
{
top: "0",
left: "0",
height: "100%",
width: "100%",
},
{
data: {
videoData:this.videoData,
},
{
data: {
token: '2222',
userInfo: '44444',
implantType: 'uniapp'
}
}) //不用data键值对的方式传的话，h5接收后会是多个字段，而非一个对象
let currentWebview = this.$mp.page.$getAppWebview()
currentWebview.append(wv);//重要，否则会失效
}
); //不用data键值对的方式传的话，h5接收后会是多个字段，而非一个对象
let currentWebview = this.$mp.page.$getAppWebview();
currentWebview.append(wv); //重要，否则会失效
},
async init(data, isChange) {
this.platform = this.$platform;
this.isfresh = true;
console.log("at line 59:", "是否先走init这里", this.platform);
@@ -200,7 +194,7 @@ export default {
// await this.getVideo(isChange);
// this.$emit("child-event", this.timer);
},
async getData(data, isChange) {
var that = this;
if (!this.isSetFirstTime) {
@@ -244,8 +238,10 @@ export default {
// }
console.log(this.firstTime, "这是第一次播放时长");
}
this.isSetFirstTime = true;
await this.initWebView();
},
async playVideo(e) {
this.videoContext = uni.createVideoContext("videoId", this);

175
static/html/aliplayer.html
View File

@@ -1,95 +1,92 @@
<!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;
}
<head>
<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 {
background-color: #f0ad4e;
}
<script type="text/javascript" src="https://js.cdn.aliyun.dcloud.net.cn/dev/uni-app/uni.webview.1.5.1.js"></script>
.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>
<script src="./vue.js"></script>
<!-- <script src="./textData.js"></script> -->
<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
View 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>