<template>
<md-card>
<md-card-actions>
<div class="md-subhead">
<span>Base Config / 基本示例</span>
</div>
<md-button class="md-icon-button"
target="_blank"
href="https://github.com/surmon-china/vue-video-player/tree/master/examples/01-video.vue">
<md-icon>code</md-icon>
</md-button>
</md-card-actions>
<md-card-media>
<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>
</md-card-media>
</md-card>
</template>
<script>
import '../src/custom-theme.css'
export default {
data() {
return {
playerOptions: {
height: '360',
autoplay: true,
muted: true,
language: 'en',
playbackRates: [0.7, 1.0, 1.5, 2.0],
sources: [{
type: "video/mp4",
src: "http://vjs.zencdn.net/v/oceans.mp4",
}],
poster: "https://surmon-china.github.io/vue-quill-editor/static/images/surmon-1.jpg",
}
}
},
mounted() {
setTimeout(() => {
console.log('dynamic change options', this.player)
this.player.muted(false)
}, 5000)
},
computed: {
player() {
return this.$refs.videoPlayer.player
}
},
methods: {
onPlayerPlay(player) {
},
onPlayerPause(player) {
},
onPlayerEnded(player) {
},
onPlayerLoadeddata(player) {
},
onPlayerWaiting(player) {
},
onPlayerPlaying(player) {
},
onPlayerTimeupdate(player) {
},
onPlayerCanplay(player) {
},
onPlayerCanplaythrough(player) {
},
playerStateChanged(playerCurrentState) {
},
playerReadied(player) {
console.log('example player 1 readied', player)
player.currentTime(10)
}
}
}
</script>
<template>
<md-card>
<md-card-actions>
<div class="md-subhead">
<span>Custom event name & hotkeys plugin & flash plugin / Flash插件 & 自定义事件名称 & 热键插件</span>
</div>
<md-button class="md-icon-button"
target="_blank"
href="https://github.com/surmon-china/vue-video-player/tree/master/examples/02-video.vue">
<md-icon>code</md-icon>
</md-button>
</md-card-actions>
<md-card-media>
<div class="item">
<div class="player">
<video-player class="vjs-custom-skin"
ref="videoPlayer"
:options="playerOptions"
customEventName="changed"
@ready="playerIsReady"
@changed="playerStateChanged($event)">
</video-player>
</div>
</div>
</md-card-media>
</md-card>
</template>
<script>
import '../src/custom-theme.css'
import 'videojs-flash'
import 'videojs-hotkeys'
export default {
data() {
return {
playerOptions: {
height: '360',
autoplay: false,
sources: [{
type: 'video/x-flv',
src: 'http://fms.cntv.lxdns.com/live/flv/channel96.flv'
}],
language: 'zh-CN',
techOrder: ['flash'],
poster: "https://surmon-china.github.io/vue-quill-editor/static/images/surmon-6.jpg"
}
}
},
computed: {
player() {
return this.$refs.videoPlayer.player
}
},
methods: {
playerStateChanged(playerCurrentState) {
console.log('example 2: state changed', playerCurrentState)
},
playerIsReady(player) {
console.log('example 2 ready!', player)
player.hotkeys({
volumeStep: 0.1,
seekStep: 5,
enableModifiersForNumbers: false,
fullscreenKey: function(event, player) {
return ((event.which === 70) || (event.ctrlKey && event.which === 13));
}
})
}
}
}
</script>
<template>
<md-card>
<md-card-actions>
<div class="md-subhead">
<span>AudioTrack && playsinline / 音轨 及 移动端不全屏</span>
</div>
<md-button class="md-icon-button"
target="_blank"
href="https://github.com/surmon-china/vue-video-player/tree/master/examples/03-video.vue">
<md-icon>code</md-icon>
</md-button>
</md-card-actions>
<md-card-media>
<div class="item">
<div class="player">
<video-player class="vjs-custom-skin"
:options="playerOptions"
:playsinline="true"
@ready="playerReadied($event)"></video-player>
</div>
</div>
</md-card-media>
</md-card>
</template>
<script>
import videojs from 'video.js'
export default {
data() {
return {
playerOptions: {
height: '360',
playbackRates: [0.7, 1, 1.3, 1.5, 1.7],
sources: [{
type: "video/mp4",
src: "http://7xkwa7.media1.z0.glb.clouddn.com/sample_video_L"
}],
poster: "https://surmon-china.github.io/vue-quill-editor/static/images/surmon-3.jpg",
}
}
},
methods: {
playerReadied(player) {
const track = new videojs.AudioTrack({
id: 'my-spanish-audio-track',
kind: 'translation',
label: 'Spanish',
language: 'es'
})
player.audioTracks().addTrack(track)
const audioTrackList = player.audioTracks()
audioTrackList.addEventListener('change', function() {
for (let i = 0; i < audioTrackList.length; i++) {
const track = audioTrackList[i]
if (track.enabled) {
videojs.log(track.label)
return
}
}
})
}
}
}
</script>
<template>
<md-card>
<md-card-actions>
<div class="md-subhead">
<span>HLS Live / 直播</span>
</div>
<md-button class="md-icon-button"
target="_blank"
href="https://github.com/surmon-china/vue-video-player/tree/master/examples/04-video.vue">
<md-icon>code</md-icon>
</md-button>
</md-card-actions>
<md-card-media>
<div class="item">
<div class="player">
<video-player class="vjs-custom-skin"
:options="playerOptions"
@ready="playerReadied">
</video-player>
</div>
</div>
</md-card-media>
</md-card>
</template>
<script>
import '../src/custom-theme.css'
import videojs from 'video.js'
window.videojs = videojs
require('videojs-contrib-hls/dist/videojs-contrib-hls.js')
export default {
data() {
return {
playerOptions: {
height: '360',
sources: [{
withCredentials: false,
type: "application/x-mpegURL",
src: "https://logos-channel.scaleengine.net/logos-channel/live/biblescreen-ad-free/playlist.m3u8"
}],
controlBar: {
timeDivider: false,
durationDisplay: false
},
flash: { hls: { withCredentials: false }},
html5: { hls: { withCredentials: false }},
poster: "https://surmon-china.github.io/vue-quill-editor/static/images/surmon-5.jpg"
}
}
},
methods: {
playerReadied(player) {
var hls = player.tech({ IWillNotUseThisInPlugins: true }).hls
player.tech_.hls.xhr.beforeRequest = function(options) {
return options
}
}
}
}
</script>
<template>
<md-card>
<md-card-actions>
<div class="md-subhead">
<span>rtmp flash / 流媒体</span>
</div>
<md-button class="md-icon-button"
target="_blank"
href="https://github.com/surmon-china/vue-video-player/tree/master/examples/05-video.vue">
<md-icon>code</md-icon>
</md-button>
</md-card-actions>
<md-card-media>
<div class="item">
<div class="player">
<video-player class="vjs-custom-skin" :options="playerOptions">
</video-player>
</div>
</div>
</md-card-media>
</md-card>
</template>
<script>
import 'videojs-flash'
export default {
data() {
return {
playerOptions: {
height: '360',
sources: [{
type: "rtmp/mp4",
src: "rtmp://184.72.239.149/vod/&mp4:BigBuckBunny_115k.mov"
}],
techOrder: ['flash'],
autoplay: false,
controls: true,
poster: "https://surmon-china.github.io/vue-quill-editor/static/images/surmon-9.jpg"
}
}
}
}
</script>