12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152535455565758596061626364656667686970717273747576777879808182 |
- <template>
-
- <div>
- <video-player
- class="vjs-custom-skin"
- ref="videoPlayer"
- :options="playerOptions"
- @ready="onPlayerReadied"
- @timeupdate="onTimeupdate"
- :playsinline="playsinline"
- >
- </video-player>
- </div>
- </template>
- <script>
- import 'video.js/dist/video-js.css'
- import 'vue-video-player/src/custom-theme.css'
- require('videojs-contrib-hls/dist/videojs-contrib-hls.js')
- import 'video.js/dist/video-js.css'
- import { videoPlayer } from 'vue-video-player'
- export default {
- components: {
- videoPlayer,
- },
- name: '',
- data() {
- return {
- initialized: false,
- currentTech: '',
- streams: {
- rtmp: '',
- hls: '',
- },
- playerOptions: {
- fluid: true,
- muted: false,
- sources: [
- {
- type: 'application/x-mpegURL',
- src: 'http://pull-hls-f11.douyincdn.com/media/stream-401505250575909548.m3u8',
- },
- ],
- notSupportedMessage: '此视频暂无法播放,请稍后再试',
- hls: true,
- },
- }
- },
- mounted() {},
- computed: {
- player() {
- return this.$refs.videoPlayer.player
- },
- currentStream() {
- return this.currentTech === 'Flash' ? 'RTMP' : 'HLS'
- },
- playsinline() {
- let ua = navigator.userAgent.toLocaleLowerCase()
- // x5内核
- if (ua.match(/tencenttraveler/) != null || ua.match(/qqbrowse/) != null) {
- return false
- } else {
- // ios端
- return true
- }
- },
- },
- methods: {
- onPlayerReadied() {
- if (!this.initialized) {
- this.initialized = true
- this.currentTech = this.player.techName_
- }
- },
- onTimeupdate(e) {
- // console.log('currentTime', e.cache_.currentTime)
- },
- },
- }
- </script>
- <style scoped></style>
|