|
@@ -0,0 +1,245 @@
|
|
|
+<template>
|
|
|
+ <div class="H5PlayerVideo">
|
|
|
+ <div :id="videoData.id" :ref="videoData.id"></div>
|
|
|
+ <p class="full-screen-button" @click="fullScreen"></p>
|
|
|
+ <timeInput ref="progressBar"></timeInput>
|
|
|
+ <!--<p class="full-failed-button" v-if="fullScreenType" @click="outFullScreen"></p>-->
|
|
|
+ </div>
|
|
|
+</template>
|
|
|
+
|
|
|
+<script>
|
|
|
+ import timeInput from "@/components/H5PlayerVideoTime/timeInput.vue";
|
|
|
+ export default {
|
|
|
+ name: 'H5PlayerVideo',
|
|
|
+ components: {
|
|
|
+ timeInput,
|
|
|
+ },
|
|
|
+ props: {
|
|
|
+ videoProps: {}
|
|
|
+ },
|
|
|
+ data() {
|
|
|
+ return {
|
|
|
+ fullScreenType:false,
|
|
|
+ videoCover: localStorage.getItem('fileBrowseEnvironment') + localStorage.getItem('videoCover'),
|
|
|
+ videoData: {},
|
|
|
+ }
|
|
|
+ },
|
|
|
+ created() {
|
|
|
+ this.$set(this, 'videoData', {
|
|
|
+ id: 'video_' + this.generateRandomString(),
|
|
|
+ width: this.videoProps.width ? this.videoProps.width : 600,
|
|
|
+ height: this.videoProps.height ? this.videoProps.height : 338,
|
|
|
+ url: this.videoProps.url
|
|
|
+ })
|
|
|
+ },
|
|
|
+ mounted() {
|
|
|
+ this.$nextTick(() => {
|
|
|
+ this.initH5Player(1)
|
|
|
+ let type = this.videoData.url.indexOf('wss') !== -1?1:0;
|
|
|
+ this.initPlayer(this.videoData.url, 0,type)
|
|
|
+ })
|
|
|
+ },
|
|
|
+ methods: {
|
|
|
+ //全屏
|
|
|
+ fullScreen() {
|
|
|
+ if(this.$parent.$parent.stopTime){
|
|
|
+ this.$parent.$parent.stopTime(this.videoProps);
|
|
|
+ }else if(this.$parent.stopTime){
|
|
|
+ this.$parent.stopTime(this.videoProps);
|
|
|
+ }else{
|
|
|
+ this.myPlugin.JS_FullScreenDisplay(true).then(
|
|
|
+ (res) => {
|
|
|
+ // console.info('JS_FullScreenDisplay success');
|
|
|
+ // do you want...
|
|
|
+ },
|
|
|
+ (err) => {
|
|
|
+ // console.info('JS_FullScreenDisplay failed');
|
|
|
+ // do you want...
|
|
|
+ }
|
|
|
+ );
|
|
|
+ }
|
|
|
+ },
|
|
|
+ //退出全屏
|
|
|
+ outFullScreen() {
|
|
|
+ let self = this;
|
|
|
+ this.myPlugin.JS_FullScreenDisplay(false).then(
|
|
|
+ (res) => {
|
|
|
+ console.info('JS_FullScreenDisplay success');
|
|
|
+ // do you want...
|
|
|
+ },
|
|
|
+ (err) => {
|
|
|
+ console.info('JS_FullScreenDisplay failed');
|
|
|
+ // do you want...
|
|
|
+ }
|
|
|
+ );
|
|
|
+ self.$set(self,'fullScreenType',false);
|
|
|
+ },
|
|
|
+ initH5Player(split) {
|
|
|
+ this.myPlugin = new window.JSPlugin({
|
|
|
+ szId: this.videoData.id, //需要英文字母开头,唯一性,必填
|
|
|
+ szBasePath: '/h5player/', // 必填,与h5player.min.js的引用目录一致 填写的是pulblic下的路径!!!
|
|
|
+ bSupporDoubleClickFull: true,//是否支持双击全屏,默认true
|
|
|
+ openDebug: true,
|
|
|
+ oStyle: {
|
|
|
+ borderSelect: '#000'
|
|
|
+ },
|
|
|
+ // 当容器div#play_window有固定宽高时,可不传iWidth和iHeight,窗口大小将自适应容器宽高
|
|
|
+ iWidth: this.videoData.width,
|
|
|
+ iHeight: this.videoData.height,
|
|
|
+ // 分屏播放,默认最大分屏4*4
|
|
|
+ iMaxSplit: split,
|
|
|
+ iCurrentSplit: split
|
|
|
+ })
|
|
|
+ let iWndNum = 1;
|
|
|
+ let InterruptTime = 5;
|
|
|
+ this.myPlugin.JS_SetInterruptTime(iWndNum, InterruptTime).then(
|
|
|
+ () => {
|
|
|
+ // console.info('JS_SetInterruptTime success');
|
|
|
+ // do you want...
|
|
|
+ },
|
|
|
+ (err) => {
|
|
|
+ // console.info('JS_SetInterruptTime failed');
|
|
|
+ // do you want...
|
|
|
+ }
|
|
|
+ );
|
|
|
+ // 事件回调绑定
|
|
|
+ this.myPlugin.JS_SetWindowControlCallback({
|
|
|
+ windowEventSelect: function (iWndIndex) { //插件选中窗口回调
|
|
|
+ // console.log('windowSelect callback: ', iWndIndex)
|
|
|
+ },
|
|
|
+ pluginErrorHandler: function (iWndIndex, iErrorCode, oError) { //插件错误回调
|
|
|
+ // console.log('pluginError callback: ', iWndIndex, iErrorCode, oError)
|
|
|
+ },
|
|
|
+ windowEventOver: function (iWndIndex) { //鼠标移过回调
|
|
|
+ //console.log(iWndIndex);
|
|
|
+ },
|
|
|
+ windowEventOut: function (iWndIndex) { //鼠标移出回调
|
|
|
+ //console.log(iWndIndex);
|
|
|
+ },
|
|
|
+ windowEventUp: function (iWndIndex) { //鼠标mouseup事件回调
|
|
|
+ //console.log(iWndIndex);
|
|
|
+ },
|
|
|
+ windowFullCcreenChange: function (bFull) { //全屏切换回调
|
|
|
+ // console.log('fullScreen callback: ', bFull)
|
|
|
+ },
|
|
|
+ firstFrameDisplay: function (iWndIndex, iWidth, iHeight) { //首帧显示回调
|
|
|
+ // console.log('firstFrame loaded callback: ', iWndIndex, iWidth, iHeight)
|
|
|
+ },
|
|
|
+ performanceLack: function () { //性能不足回调
|
|
|
+ // console.log('performanceLack callback: ')
|
|
|
+ }
|
|
|
+ })
|
|
|
+ },
|
|
|
+ initPlayer(url, index,type) {
|
|
|
+ let newUrl = url.split("?")[0]
|
|
|
+ let list = url.split("?")[1].split("&");
|
|
|
+ let timeData = {};
|
|
|
+ list.forEach((item) => {
|
|
|
+ timeData[item.split("=")[0]] = item.split("=")[1];
|
|
|
+ })
|
|
|
+ let startTime = timeData.beginTime +".000+08:00";
|
|
|
+ let endTime = timeData.endTime + ".000+08:00";
|
|
|
+ this.myPlugin.JS_Play(newUrl,
|
|
|
+ {
|
|
|
+ playURL: newUrl, // 流媒体播放时必传
|
|
|
+ mode: type?type:0 // 解码类型:0=普通模式; 1=高级模式 默认为0
|
|
|
+ // ...
|
|
|
+ },
|
|
|
+ index, //当前窗口下标
|
|
|
+ startTime,
|
|
|
+ endTime
|
|
|
+ ).then(
|
|
|
+ () => {
|
|
|
+ // console.info('JS_Play success')
|
|
|
+ // do you want...
|
|
|
+ },
|
|
|
+ (err) => {
|
|
|
+ // console.info('JS_Play failed:', err)
|
|
|
+ // do you want...
|
|
|
+ }
|
|
|
+ )
|
|
|
+ // 初始化进度条(示例时间)
|
|
|
+ this.$refs.progressBar.init(
|
|
|
+ timeData.beginTime,
|
|
|
+ timeData.endTime
|
|
|
+ );
|
|
|
+ },
|
|
|
+ //生成随机ID
|
|
|
+ generateRandomString() {
|
|
|
+ let chars = 'ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789'
|
|
|
+ let randomString = ''
|
|
|
+ for (let i = 0; i < 24; i++) {
|
|
|
+ let randomIndex = Math.floor(Math.random() * chars.length)
|
|
|
+ randomString += chars.charAt(randomIndex)
|
|
|
+ }
|
|
|
+ return randomString
|
|
|
+ },
|
|
|
+ videoOff() {
|
|
|
+ this.myPlugin.JS_StopRealPlayAll().then(
|
|
|
+ () => {
|
|
|
+ console.info('JS_StopRealPlayAll success')
|
|
|
+ // do you want...
|
|
|
+ },
|
|
|
+ (err) => {
|
|
|
+ console.info('JS_StopRealPlayAll failed')
|
|
|
+ // do you want...
|
|
|
+ }
|
|
|
+ )
|
|
|
+ },
|
|
|
+ //定位时间
|
|
|
+ seeTo(time1,time2){
|
|
|
+ let seekStart = time1 +".000+08:00";
|
|
|
+ let endTime = time2 + ".000+08:00";
|
|
|
+ this.myPlugin.JS_Seek(this.myPlugin.currentWindowIndex, seekStart, endTime).then(
|
|
|
+ () => { console.log('seekTo success') },
|
|
|
+ e => { console.error(e) }
|
|
|
+ )
|
|
|
+ },
|
|
|
+ //暂停
|
|
|
+ playbackPause() {
|
|
|
+ this.myPlugin.JS_Pause(this.myPlugin.currentWindowIndex).then(
|
|
|
+ () => { console.log('playbackPause success') },
|
|
|
+ e => { console.error(e) }
|
|
|
+ )
|
|
|
+ },
|
|
|
+ //恢复
|
|
|
+ playbackResume() {
|
|
|
+ this.myPlugin.JS_Resume(this.myPlugin.currentWindowIndex).then(
|
|
|
+ () => { console.log('playbackResume success') },
|
|
|
+ e => { console.error(e) }
|
|
|
+ )
|
|
|
+ },
|
|
|
+ },
|
|
|
+ beforeDestroy() {
|
|
|
+ let self = this
|
|
|
+ self.videoOff()
|
|
|
+ }
|
|
|
+ }
|
|
|
+</script>
|
|
|
+
|
|
|
+<style scoped lang="scss">
|
|
|
+ .H5PlayerVideo {
|
|
|
+ margin: 0;
|
|
|
+ padding: 0;
|
|
|
+ display: inline-block;
|
|
|
+ * {
|
|
|
+ margin: 0;
|
|
|
+ padding: 0;
|
|
|
+ }
|
|
|
+ position: relative;
|
|
|
+ .full-screen-button {
|
|
|
+ background: url("../../assets/ZDimages/basicsModules/icon_0.png");
|
|
|
+ background-size: 100%;
|
|
|
+ position: absolute;
|
|
|
+ font-size: 20px;
|
|
|
+ height: 30px;
|
|
|
+ width: 30px;
|
|
|
+ line-height: 30px;
|
|
|
+ text-align: center;
|
|
|
+ top: 0;
|
|
|
+ right: 0;
|
|
|
+ z-index: 1;
|
|
|
+ cursor: pointer;
|
|
|
+ }
|
|
|
+ }
|
|
|
+</style>
|