1 npm install vue-video-player -S

1 import VideoPlayer from \'vue-video-player\'
2 require(\'video.js/dist/video-js.css\')
3 require(\'vue-video-player/src/custom-theme.css\')
4 Vue.use(VideoPlayer)

 1 <template>
 2         <video-player  class="video-player vjs-custom-skin"
 3             ref="videoPlayer"
 4             :playsinline="true"
 5             :options="playerOptions"
 6         ></video-player>
 7 </template>
 8 <script>
 9 export default {
10   name: \'BusImg\',
11   data () {
12     return {
13       // 视频播放
14       playerOptions : {
15         playbackRates: [0.7, 1.0, 1.5, 2.0], //播放速度
16         autoplay: false, //如果true,浏览器准备好时开始回放。
17         muted: false, // 默认情况下将会消除任何音频。
18         loop: false, // 导致视频一结束就重新开始。
19         preload: \'auto\', // 建议浏览器在<video>加载元素后是否应该开始下载视频数据。auto浏览器选择最佳行为,立即开始加载视频（如果浏览器支持）
20         language: \'zh-CN\',
21         aspectRatio: \'16:9\', // 将播放器置于流畅模式，并在计算播放器的动态大小时使用该值。值应该代表一个比例 - 用冒号分隔的两个数字（例如"16:9"或"4:3"）
22         techOrder: [\'flash\', \'html5\'],      // 兼容顺序

23 　　　　flash: {

24           hls: { withCredentials: false },
25           swf: \'./static/media/video-js.swf\'         // 引入静态文件swf
26         },
27         html5: { hls: { withCredentials: false } },
28         sources: [{ // 流配置，数组形式，会根据兼容顺序自动切换
29           type: \'rtmp/hls\',
30           src: \'rtmp://192.168.1.199:10935/hls/stream_1\'
31         }, {
32           withCredentials: false,
33           type: \'application/x-mpegURL\',
34           src: \'http://playertest.longtailvideo.com/adaptive/bipbop/gear4/prog_index.m3u8\'
35         }],
36         poster: "", //你的封面地址
37         // width: document.documentElement.clientWidth,
38         notSupportedMessage: \'此视频暂无法播放，请稍后再试\', //允许覆盖Video.js无法播放媒体源时显示的默认信息。
39         controlBar: {
40           timeDivider: true,
41           durationDisplay: true,
42           remainingTimeDisplay: false,
43           fullscreenToggle: true  //全屏按钮
44         }
45     }
46 </script>