|
|
@@ -0,0 +1,229 @@
|
|
|
+<template>
|
|
|
+ <view class="ezy-video-box course-video-box">
|
|
|
+ <view ref="videoContent" id="video-play2" :playAuth="playAuth1"
|
|
|
+ :change:playAuth="renderScript.receiveMsg" :videoId="videoId1" :change:videoId="renderScript.videoIdFun"
|
|
|
+ :hideFlag="hideFlag1" :change:hideFlag="renderScript.hideFlagFun" :progressMarkers="progressMarkers1"
|
|
|
+ :change:progressMarkers="renderScript.progressMarkersMsg" :seekTime="seekTime1"
|
|
|
+ :change:seekTime="renderScript.seekTimeFun" class="ezy-video">
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+</template>
|
|
|
+
|
|
|
+<script>
|
|
|
+ import {MyRenderEventBus} from "./renderEvents"
|
|
|
+ export default {
|
|
|
+ name: "videoPlay",
|
|
|
+ props: {
|
|
|
+ progressMarkers1: {
|
|
|
+ type: Array,
|
|
|
+ default: () => ([])
|
|
|
+ },
|
|
|
+ videoId1: {
|
|
|
+ type: String,
|
|
|
+ },
|
|
|
+ playAuth1: {
|
|
|
+ type: String,
|
|
|
+ },
|
|
|
+ seekTime1: {
|
|
|
+ type: String
|
|
|
+ },
|
|
|
+ hideFlag1: {
|
|
|
+ type: String
|
|
|
+ }
|
|
|
+ },
|
|
|
+ data() {
|
|
|
+ return {}
|
|
|
+ },
|
|
|
+ methods: {
|
|
|
+ handleStop() {
|
|
|
+ MyRenderEventBus.$emit(`video-play2`)
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+</script>
|
|
|
+
|
|
|
+<script module="renderScript" lang="renderjs">
|
|
|
+ import {MyRenderEventBus} from "./renderEvents"
|
|
|
+ export default {
|
|
|
+ mounted() {
|
|
|
+ MyRenderEventBus.$on(`video-play2`, this.stopPlayer)
|
|
|
+ },
|
|
|
+ Unmounted() {
|
|
|
+ MyRenderEventBus.$ff(`video-play2`, this.stopPlayer)
|
|
|
+ },
|
|
|
+ data() {
|
|
|
+
|
|
|
+ return {
|
|
|
+ player: null,
|
|
|
+ playAuth: '',
|
|
|
+ videoId: '',
|
|
|
+ progressMarkers: [],
|
|
|
+ isFullScreen: false,
|
|
|
+ seekTime: '',
|
|
|
+ }
|
|
|
+ },
|
|
|
+ methods: {
|
|
|
+ // 通用的方法调用器
|
|
|
+ handleRenderMethod(methodName, params) {
|
|
|
+ if (this[methodName] && typeof this[methodName] === 'function') {
|
|
|
+ return this[methodName](params)
|
|
|
+ }
|
|
|
+ },
|
|
|
+ stopPlayer() {
|
|
|
+ this.player && this.player.pause();
|
|
|
+ },
|
|
|
+ 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()
|
|
|
+ }
|
|
|
+ },
|
|
|
+ progressMarkersMsg(newValue, oldValue, ownerInstance, instance) {
|
|
|
+ if (newValue) {
|
|
|
+ this.progressMarkers = newValue
|
|
|
+ }
|
|
|
+ },
|
|
|
+ seekTimeFun(newValue, oldValue, ownerInstance, instance) {
|
|
|
+ if (newValue) {
|
|
|
+ this.player.play()
|
|
|
+ this.player.seek(newValue)
|
|
|
+ }
|
|
|
+ },
|
|
|
+ playAli() {
|
|
|
+
|
|
|
+
|
|
|
+ let that = this
|
|
|
+ //配置播放器
|
|
|
+ if (!this.playAuth) {
|
|
|
+ return false;
|
|
|
+ }
|
|
|
+ var player = new Aliplayer({
|
|
|
+ id: 'video-play2',
|
|
|
+ "vid": this.videoId,
|
|
|
+ "playauth": this.playAuth,
|
|
|
+ extraInfo: {
|
|
|
+ poster: 'noposter'
|
|
|
+ },
|
|
|
+ fullscreenEvents: {
|
|
|
+ fullscreenChange: (isFull) => {
|
|
|
+ this.isFullScreen = isFull
|
|
|
+ }
|
|
|
+ },
|
|
|
+ "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,
|
|
|
+ "progressMarkers": this.progressMarkers,
|
|
|
+ "autoplay": false,
|
|
|
+ "isLive": false,
|
|
|
+ "rePlay": false,
|
|
|
+ "playsinline": true,
|
|
|
+ "preload": false,
|
|
|
+ "controlBarVisibility": "hover",
|
|
|
+ "useH5Prism": true
|
|
|
+
|
|
|
+ }, function(player) {});
|
|
|
+ this.player = player;
|
|
|
+
|
|
|
+
|
|
|
+ player.on('canplay', function() {
|
|
|
+ player.tag.play();
|
|
|
+
|
|
|
+ });
|
|
|
+
|
|
|
+ player.on('ended', function(data) {
|
|
|
+ that.exitFullScreen();
|
|
|
+ that.$ownerInstance.callMethod('playEnd', {
|
|
|
+ data: 'end'
|
|
|
+ })
|
|
|
+ });
|
|
|
+ },
|
|
|
+ exitFullScreen() {
|
|
|
+ if (document.exitFullscreen) {
|
|
|
+ document.exitFullscreen(); // 标准方法
|
|
|
+ } else if (document.mozCancelFullScreen) { // Firefox
|
|
|
+ document.mozCancelFullScreen();
|
|
|
+ } else if (document.webkitExitFullscreen) { // Chrome, Safari & Opera
|
|
|
+ document.webkitExitFullscreen();
|
|
|
+ } else if (document.msExitFullscreen) { // IE/Edge
|
|
|
+ document.msExitFullscreen();
|
|
|
+ }
|
|
|
+ },
|
|
|
+
|
|
|
+ loadWebPlayerSDK() {
|
|
|
+ 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);
|
|
|
+ this.playAli()
|
|
|
+ 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>
|
wangxy