123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323 |
- <template>
- <a-modal
- :title="title"
- :width="1300"
- :visible="visible"
- @cancel="handleCancel"
- cancelText="关闭"
- class="ad_cover_container"
- >
- <div>
- <a-row>
- <a-col :span="8" class="addetail_left">
- <a-tabs :defaultActiveKey="defaultActiveKey">
- <a-tab-pane tab="视频" key="1">
- <div class="item">
- <div class="player">
- <video-player
- class="vjs-custom-skin"
- ref="videoPlayer"
- :options="playerOptions"
- :playsinline="true"
- @play="onPlayerPlay($event)"
- @pause="onPlayerPause($event)"
- @ended="onPlayerEnded($event)"
- @loadeddata="onPlayerLoadeddata($event)"
- @waiting="onPlayerWaiting($event)"
- @playing="onPlayerPlaying($event)"
- @timeupdate="onPlayerTimeupdate($event)"
- @canplay="onPlayerCanplay($event)"
- @canplaythrough="onPlayerCanplaythrough($event)"
- @ready="playerReadied"
- @statechanged="playerStateChanged($event)"
- ></video-player>
- </div>
- </div>
- </a-tab-pane>
- </a-tabs>
- </a-col>
- <a-col :span="16" class="addetail_right">
- <div v-if="videoModel != null">
- <detail-list :col="1">
- <detail-list-item term="简介">{{ videoModel.caption }}</detail-list-item>
- </detail-list>
- <!-- <detail-list :col="1">
- <detail-list-item term="播放数">{{ videoModel.playingTime }}</detail-list-item>
- </detail-list>
- <detail-list :col="1">
- <detail-list-item term="点赞数">{{ videoModel.likeTime }}</detail-list-item>
- </detail-list>
- <detail-list :col="1">
- <detail-list-item term="评论数">{{ videoModel.commentTime }}</detail-list-item>
- </detail-list> -->
- </div>
- </a-col>
- </a-row>
- </div>
- </a-modal>
- </template>
- <script>
- // custom skin css
- // import '../src/custom-theme.css'
- import 'video.js/dist/video-js.css'
- import { videoPlayer } from 'vue-video-player'
- import DetailList from '@/components/tools/DetailList'
- import PageLayout from '@/components/page/PageLayout'
- import STable from '@/components/table/'
- import { getAction, deleteAction, putAction, postAction } from '@/api/manage'
- import { stopOtherVideo, closeAllVideoFun } from '@/utils/videoControl'
- const DetailListItem = DetailList.Item
- export default {
- components: {
- videoPlayer,
- PageLayout,
- DetailList,
- DetailListItem,
- STable
- },
- data() {
- return {
- goodsColumns: [
- {
- title: '封面ID',
- dataIndex: 'coverId',
- key: 'coverId'
- },
- {
- title: '封面预览',
- // dataIndex: 'coverUrl',
- // key: 'coverUrl',
- dataIndex: 'ADcoverImagePreview',
- scopedSlots: { customRender: 'ADcoverImagePreview' }
- },
- {
- title: '创意ID',
- dataIndex: 'creativeId',
- key: 'creativeId'
- },
- {
- title: '展示数',
- dataIndex: 'viewCount',
- key: 'viewCount'
- },
- {
- title: '喜欢数',
- dataIndex: 'likeCount',
- key: 'likeCount'
- },
- {
- title: '评论数',
- dataIndex: 'commentCount',
- key: 'commentCount'
- },
- {
- title: '质量分',
- dataIndex: 'score',
- key: 'score'
- },
- {
- title: 'App名称',
- dataIndex: 'appName',
- key: 'appName'
- },
- {
- title: '发布时间',
- dataIndex: 'time',
- key: 'time'
- }
- ],
- userId: 0,
- photoId: 0,
- title: '操作',
- visible: false,
- model: [],
- userModel: {},
- videoModel: {},
- labelCol: {
- xs: { span: 24 },
- sm: { span: 5 }
- },
- wrapperCol: {
- xs: { span: 24 },
- sm: { span: 16 }
- },
- // videojs options
- playerOptions: {
- height: '640',
- width: '360',
- autoplay: false,
- muted: true,
- language: 'en',
- playbackRates: [0.7, 1.0, 1.5, 2.0],
- sources: [
- {
- type: 'video/mp4',
- // mp4
- src: ''
- // webm
- // src: "https://cdn.theguardian.tv/webM/2015/07/20/150716YesMen_synd_768k_vp8.webm"
- }
- ],
- poster: ''
- },
- defaultActiveKey: '1',
- // 封面预览弹窗
- coverPreviewVisible: false,
- coverPreviewMaskStyle: {
- background: 'rgba(0,0,0,.08)'
- },
- coverPreviewUrl: ''
- }
- },
- mounted() {
- // console.log('this is current player instance object', this.player)
- setTimeout(() => {
- // console.log('dynamic change options', this.player)
- // change src
- // this.playerOptions.sources[0].src = 'https://cdn.theguardian.tv/webM/2015/07/20/150716YesMen_synd_768k_vp8.webm';
- // change item
- // this.$set(this.playerOptions.sources, 0, {
- // type: "video/mp4",
- // src: 'https://cdn.theguardian.tv/webM/2015/07/20/150716YesMen_synd_768k_vp8.webm',
- // })
- // change array
- // this.playerOptions.sources = [{
- // type: "video/mp4",
- // src: 'https://cdn.theguardian.tv/webM/2015/07/20/150716YesMen_synd_768k_vp8.webm',
- // }]
- // this.player.muted(false)
- }, 5000)
- },
- computed: {
- // player() {
- // return this.$refs.videoPlayer.player
- // }
- },
- methods: {
- // listen event
- onPlayerPlay(player) {
- // console.log('player play!', player)
- },
- onPlayerPause(player) {
- // console.log('player pause!', player)
- },
- onPlayerEnded(player) {
- // console.log('player ended!', player)
- },
- onPlayerLoadeddata(player) {
- // console.log('player Loadeddata!', player)
- },
- onPlayerWaiting(player) {
- // console.log('player Waiting!', player)
- },
- onPlayerPlaying(player) {
- // console.log('player Playing!', player)
- },
- onPlayerTimeupdate(player) {
- // console.log('player Timeupdate!', player.currentTime())
- },
- onPlayerCanplay(player) {
- // console.log('player Canplay!', player)
- },
- onPlayerCanplaythrough(player) {
- // console.log('player Canplaythrough!', player)
- },
- // or listen state event
- playerStateChanged(playerCurrentState) {
- // console.log('player current update state', playerCurrentState)
- },
- // player is ready
- playerReadied(player) {
- // seek to 10s
- console.log('example player 1 readied', player)
- // player.currentTime(10)
- // console.log('example 01: the player is readied', player)
- },
- show(value) {
- this.model = []
- this.userModel = {}
- this.videoModel = value
- this.playerOptions.sources[0].src = value.mainMvUrl
- this.visible = true
- this.defaultActiveKey = '1'
- },
- close() {
- this.$emit('close')
- this.visible = false
- this.defaultActiveKey = '1'
- closeAllVideoFun()
- },
- handleCancel() {
- this.close()
- this.defaultActiveKey = '1'
- },
- // 封面预览弹窗
- coverPreviewShowModal(record) {
- this.coverPreviewVisible = true
- this.coverPreviewUrl = record.coverUrl
- this.coverPreviewMaskStyle.background = 'rgba(0,0,0,.08)'
- },
- coverPreviewHandleOk() {
- this.coverPreviewVisible = false
- this.coverPreviewMaskStyle.background = 'rgba(0,0,0,0)'
- },
- coverPreviewHandleCancel() {
- this.coverPreviewVisible = false
- this.coverPreviewUrl = ''
- this.coverPreviewMaskStyle.background = 'rgba(0,0,0,0)'
- }
- }
- }
- </script>
- <style lang="scss">
- .ant-carousel >>> .slick-slide {
- text-align: center;
- // height: 160px;
- // line-height: 160px;
- background: #364d79;
- overflow: hidden;
- }
- .ad_cover_container .ant-card-body {
- padding: 0;
- }
- .ant-carousel >>> .slick-slide h3 {
- color: #fff;
- }
- .ant-carousel >>> .custom-slick-arrow {
- width: 25px;
- height: 25px;
- font-size: 25px;
- color: #fff;
- background-color: rgba(31, 45, 61, 0.11);
- opacity: 0.3;
- }
- .ant-carousel >>> .custom-slick-arrow:before {
- display: none;
- }
- .ant-carousel >>> .custom-slick-arrow:hover {
- opacity: 0.5;
- }
- .addetail_left {
- padding-right: 56px;
- .custom-slick-arrow {
- width: 40px;
- height: 40px;
- }
- .slick_arrow_left {
- background: url(../images/arrow_left.png);
- }
- .slick_arrow_right {
- background: url(../images/arrow_right.png);
- }
- .slick_arrow_left:hover {
- background: url(../images/arrow_left.png) !important;
- }
- .slick_arrow_right:hover {
- background: url(../images/arrow_right.png) !important;
- }
- }
- </style>
|