html播放服务器视频,vue-video-player或者HTML5 video播放服务器视频MP4 报403 浏览器正常播放-汗血宝马...

<template>

<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>

<video controls="" autoplay="" name="media"><source :src="params.filenamepath" type="video/mp4"></video>

</div>

</template>

<script>

import lessonService from '../lessonService'

export default {

data () {

return {

// videojs options

playerOptions: {

playbackRates: [0.7, 1.0, 1.5, 2.0], // 播放速度

loop: false, // 导致视频一结束就重新开始。

language: 'zh-CN',

height: document.documentElement.clientHeight,

width: document.documentElement.clientWidth,

autoplay: false,

sources: [{

type: 'video/mp4',

src: 'https://cdn.theguardian.tv/webM/2015/07/20/150716YesMen_synd_768k_vp8.webm'

}],

poster: 'https://surmon-china.github.io/vue-quill-editor/static/images/surmon-1.jpg'

},

lengthOfTime: 0,

state: 0,

params: {}

}

},

mounted () {

this.params = this.$route.params

this.playerOptions.sources[0].src = this.params.filenamepath

}

}

</script>