windows、chrome浏览器、vue项目

安装依赖

npm install vue-video-player -S

main.js引入

import VideoPlayer from 'vue-video-player'
import 'videojs-flash'
//import 'videojs-contrib-hls'//不确定是否需要了
require('video.js/dist/video-js.css')
require('vue-video-player/src/custom-theme.css')
Vue.use(VideoPlayer)

helloworld.vue代码

<template>
	<video-player	class="video-player vjs-custom-skin"
			ref="videoPlayer"
			:playsinline="true"
			:options="playerOptions"
	></video-player>
</template>
<script>
export default {
	name: 'BusImg',
	data () {
		return {
			// 视频播放
			playerOptions : {
				playbackRates: [0.7, 1.0, 1.5, 2.0], //播放速度
				autoplay: false, //如果true,浏览器准备好时开始回放。
				muted: false, // 默认情况下将会消除任何音频。
				loop: false, // 导致视频一结束就重新开始。
				preload: 'auto', // 建议浏览器在<video>加载元素后是否应该开始下载视频数据。auto浏览器选择最佳行为,立即开始加载视频（如果浏览器支持）
				language: 'zh-CN',
				aspectRatio: '16:9', // 将播放器置于流畅模式，并在计算播放器的动态大小时使用该值。值应该代表一个比例 - 用冒号分隔的两个数字（例如"16:9"或"4:3"）
				techOrder: ['html5','flash'],			// 兼容顺序
				flash: {
					hls: { withCredentials: false },
					//swf: './static/video-js.swf'				 // 引入静态文件swf
				},
				html5: { hls: { withCredentials: false } },
				sources: [{ // 流配置，数组形式，会根据兼容顺序自动切换
					type: 'rtmp/flv',
					src: 'rtmp://58.200.131.2:1935/livetv/hunantv'
				// }, {
				// 	withCredentials: false,
				// 	type: 'application/x-mpegURL',
				// 	src: 'http://playertest.longtailvideo.com/adaptive/bipbop/gear4/prog_index.m3u8'
				}],
				poster: "", //你的封面地址
				// width: document.documentElement.clientWidth,
				notSupportedMessage: '此视频暂无法播放，请稍后再试', //允许覆盖Video.js无法播放媒体源时显示的默认信息。
				controlBar: {
					timeDivider: true,
					durationDisplay: true,
					remainingTimeDisplay: false,
					fullscreenToggle: true	//全屏按钮
				}
			}
		}
	}
}
</script>

不知道的bug

1.网上看的好多demo都说要自己用npm 安装videojs、videojs-falsh、videojs-swf。我照着操作反而不行，各种问题，

VIDEOJS: ERROR: The "flash" tech is undefined. Skipped browser support check for that tech

videojs Cannot read property 'one' of undefined

No compatible source was found for this media

具体原因我也不知道，也懒得研究，可能因为PC端chrome浏览器在移动模拟器下的问题，先别用模拟器调试了，直接用真实浏览器调试吧

我创建了一个干净的vue项目，只引入了vue-video-player一个组件，node_modules目录里面出现了video.js和videojs-flash、videojs-swf等各种videojs-*开头的组件

2.swf好像并不是必须的，逻辑上看是先判断h5能否播放，不能的话就用flash的方式播放，而播放flash用的就是pllayerOptions里面的swf设置

				flash: {
					hls: { withCredentials: false },
					//swf: './static/video-js.swf'				 // 引入静态文件swf
				},

可能别的浏览器会需要用到吧

3.手机上访问此网页，依然显示博客播放。具体原因也不知道，还有待研究，本想接入第三方的插件，

结果阿里云直接说明不支持https://help.aliyun.com/document_detail/125570.html

flash模式

h5模式

一共也就这两种模式可供选择，手机上两种都不支持

华为的播放器也是直截了当

https://support.huaweicloud.com/playersdk-live/live_58_0015.html

 

另一款http-flv更是简单明了not possible

https://www.yanxurui.cc/posts/server/2017-11-25-http-flv/#rtsprtmp-streaming

那就再观望观望, 望的越多，越省的写代码了