|
|
@@ -1,255 +0,0 @@
|
|
|
-<template>
|
|
|
- <view>
|
|
|
-
|
|
|
- <view ref="videoContent" id="wgy-player-test" :playAuth="playAuth" :change:playAuth="renderScript.receiveMsg"
|
|
|
- :videoId="videoId" :change:videoId="renderScript.videoIdFun" :playCount="playCount"
|
|
|
- :change:playCount="renderScript.playVideo" :status="hideFlag" :change:hideFlag="renderScript.hideFlagFun"
|
|
|
- :seekTime="seekTime" :change:seekTime="renderScript.seekTimeFun" class="kecheng-video">
|
|
|
- <zmm-watermark :watermark="watermark"></zmm-watermark>
|
|
|
- </view>
|
|
|
- </view>
|
|
|
-</template>
|
|
|
-
|
|
|
-<script>
|
|
|
- export default {
|
|
|
- name: "videoPlay",
|
|
|
- data() {
|
|
|
- return {
|
|
|
- playAuth: "", //播放凭证
|
|
|
- hideFlag: 'show',
|
|
|
- videoId: "", //阿里云视频id
|
|
|
- seekTime: '',
|
|
|
- playCount: 0,
|
|
|
- watermark: '<h5>啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊</h5><p style="color:red">我是我是p标签我是p标签p标签</p><br>'
|
|
|
- };
|
|
|
- },
|
|
|
- onUnload() {
|
|
|
- // 切换
|
|
|
- this.hideFlag = 'hide'
|
|
|
- },
|
|
|
- onHide() {
|
|
|
- this.hideFlag = 'hide'
|
|
|
- },
|
|
|
- methods: {
|
|
|
- init(options) {
|
|
|
- this.playAuth = options.playAuth;
|
|
|
- this.videoId = options.videoId;
|
|
|
- this.seekTime = options.seekTime;
|
|
|
- this.setSeekTime(options.seekTime)
|
|
|
- const isPlay = options.isPlay || false;
|
|
|
- if (isPlay) {
|
|
|
- this.playCount++
|
|
|
- }
|
|
|
- },
|
|
|
- setSeekTime(seekTime) {
|
|
|
- this.seekTime = '';
|
|
|
- this.$nextTick(() => {
|
|
|
- this.seekTime = seekTime;
|
|
|
- })
|
|
|
- },
|
|
|
- handlePause() {
|
|
|
- this.$emit('play-pause')
|
|
|
- },
|
|
|
- handlePlay() {
|
|
|
- this.$emit('play-play')
|
|
|
- },
|
|
|
- playEnd() {
|
|
|
- this.$emit('play-end')
|
|
|
- },
|
|
|
- handleTimeupdate(timer) {
|
|
|
- this.$emit('play-timeupdate', timer)
|
|
|
- }
|
|
|
- }
|
|
|
- }
|
|
|
-</script>
|
|
|
-
|
|
|
-<script module="renderScript" lang="renderjs">
|
|
|
- export default {
|
|
|
- data() {
|
|
|
- return {
|
|
|
- player: null,
|
|
|
- playAuth: '',
|
|
|
- videoId: '',
|
|
|
- }
|
|
|
- },
|
|
|
- methods: {
|
|
|
- playVideo() {
|
|
|
- setTimeout(() => {
|
|
|
- this.player && this.player.play()
|
|
|
- }, 300);
|
|
|
- },
|
|
|
- receiveMsg(newValue, oldValue, ownerInstance, instance) {
|
|
|
- if (newValue) {
|
|
|
- this.playAuth = ''
|
|
|
- this.playAuth = newValue
|
|
|
- this.loadWebPlayerSDK()
|
|
|
- }
|
|
|
- },
|
|
|
- videoIdFun(newValue, oldValue, ownerInstance, instance) {
|
|
|
- if (newValue) {
|
|
|
- this.videoId = ''
|
|
|
- this.videoId = newValue
|
|
|
- }
|
|
|
- },
|
|
|
- hideFlagFun(newValue, oldValue, ownerInstance, instance) {
|
|
|
- if (this.player) {
|
|
|
- this.player.pause()
|
|
|
- }
|
|
|
- },
|
|
|
- seekTimeFun(newValue, oldValue, ownerInstance, instance) {
|
|
|
- if (newValue) {
|
|
|
- this.player && this.player.seek(newValue)
|
|
|
- console.log('已设置时间', newValue)
|
|
|
- }
|
|
|
- },
|
|
|
- playAli() {
|
|
|
- let that = this
|
|
|
- //配置播放器
|
|
|
- if (!this.playAuth) {
|
|
|
- return false;
|
|
|
- }
|
|
|
- let player = new Aliplayer({
|
|
|
- id: "wgy-player-test",
|
|
|
- vid: this.videoId,
|
|
|
- playauth: this.playAuth,
|
|
|
- extraInfo: {
|
|
|
- poster: 'noposter'
|
|
|
- },
|
|
|
- skinLayout: [{
|
|
|
- name: "bigPlayButton",
|
|
|
- align: "blabs",
|
|
|
- x: 30,
|
|
|
- y: 80
|
|
|
- },
|
|
|
- {
|
|
|
- name: "H5Loading",
|
|
|
- align: "cc"
|
|
|
- },
|
|
|
- {
|
|
|
- name: "controlBar",
|
|
|
- align: "blabs",
|
|
|
- x: 0,
|
|
|
- y: 0,
|
|
|
- children: [{
|
|
|
- name: "progress",
|
|
|
- align: "blabs",
|
|
|
- x: 0,
|
|
|
- y: 44
|
|
|
- },
|
|
|
- {
|
|
|
- name: "playButton",
|
|
|
- align: "tl",
|
|
|
- x: 15,
|
|
|
- y: 12
|
|
|
- },
|
|
|
- // {
|
|
|
- // name: "fullScreenButton",
|
|
|
- // align: "tr",
|
|
|
- // x: 10,
|
|
|
- // y: 12
|
|
|
- // },
|
|
|
- {
|
|
|
- name: "timeDisplay",
|
|
|
- align: "tr",
|
|
|
- x: 10,
|
|
|
- y: 5
|
|
|
- }
|
|
|
- ]
|
|
|
- }
|
|
|
- ],
|
|
|
- qualitySort: "asc",
|
|
|
- format: "mp4",
|
|
|
- mediaType: "video",
|
|
|
- encryptType: 1,
|
|
|
- autoplay: false,
|
|
|
- isLive: false,
|
|
|
- rePlay: false,
|
|
|
- playsinline: true,
|
|
|
- webkitPlaysinline: true,
|
|
|
- // 针对Android微信、QQ浏览器
|
|
|
- x5_video_position: "top",
|
|
|
- x5_type: "h5",
|
|
|
- x5_fullscreen: false,
|
|
|
- // 针对iOS微信
|
|
|
- 'iphone-playsinline': true,
|
|
|
- // 防止iOS自动全屏播放
|
|
|
- 'ios-playsinline': true,
|
|
|
- // 禁用双击全屏
|
|
|
- disableDoubleClickFullscreen: true,
|
|
|
- // 禁用快捷键全屏（F键）
|
|
|
- hotkey: {
|
|
|
- fullscreen: false // 禁用全屏快捷键
|
|
|
- },
|
|
|
- preload: false,
|
|
|
- controlBarVisibility: "hover",
|
|
|
- useH5Prism: true
|
|
|
-
|
|
|
- }, function(player) {
|
|
|
- console.log('ppp', player)
|
|
|
- });
|
|
|
- this.player = player;
|
|
|
- player.on('canplay', function() {
|
|
|
- player.tag.play();
|
|
|
- });
|
|
|
- player.on('ended', function() {
|
|
|
- that.$ownerInstance.callMethod('playEnd', {
|
|
|
- data: 'end'
|
|
|
- })
|
|
|
- });
|
|
|
- player.on('pause', function() {
|
|
|
- that.$ownerInstance.callMethod('handlePause')
|
|
|
- });
|
|
|
- player.on('play', function() {
|
|
|
- that.$ownerInstance.callMethod('handlePlay')
|
|
|
- });
|
|
|
- player.on('timeupdate', function(time) {
|
|
|
- that.$ownerInstance.callMethod('handleTimeupdate', time.target.childNodes[0].currentTime)
|
|
|
- });
|
|
|
-
|
|
|
-
|
|
|
- },
|
|
|
- isHasScript() {
|
|
|
- let scriptExists = false;
|
|
|
- for (let script of document.scripts) {
|
|
|
- if (script.src === 'https://g.alicdn.com/de/prismplayer/2.9.6/aliplayer-min.js') {
|
|
|
- scriptExists = true;
|
|
|
- break;
|
|
|
- }
|
|
|
- }
|
|
|
- return scriptExists
|
|
|
- },
|
|
|
- loadWebPlayerSDK() {
|
|
|
- if (this.player) {
|
|
|
- this.player.dispose();
|
|
|
- }
|
|
|
- if (this.isHasScript()) {
|
|
|
- this.playAli()
|
|
|
- return;
|
|
|
- }
|
|
|
- return new Promise((resolve, reject) => {
|
|
|
- const s_tag = document.createElement('script'); // 引入播放器js
|
|
|
- s_tag.type = 'text/javascript';
|
|
|
- s_tag.src = 'https://g.alicdn.com/de/prismplayer/2.9.6/aliplayer-min.js';
|
|
|
- s_tag.charset = 'utf-8';
|
|
|
- s_tag.onload = () => {
|
|
|
- // console.log(this.playAuth);
|
|
|
- setTimeout(() => {
|
|
|
- this.playAli()
|
|
|
- }, 10);
|
|
|
- resolve();
|
|
|
- }
|
|
|
- document.body.appendChild(s_tag);
|
|
|
- const l_tag = document.createElement('link'); // 引入播放器css
|
|
|
- l_tag.rel = 'stylesheet';
|
|
|
- l_tag.href =
|
|
|
- 'https://g.alicdn.com/de/prismplayer/2.9.6/skins/default/aliplayer-min.css';
|
|
|
- document.body.appendChild(l_tag);
|
|
|
- });
|
|
|
- },
|
|
|
- }
|
|
|
- }
|
|
|
-</script>
|
|
|
-
|
|
|
-<style lang="scss">
|
|
|
-
|
|
|
-</style>
|
wangguoyu