async/await

async、await

async 是“异步”的简写，而 await 可以认为是 async wait 的简写。

所以应该很好理解 async 用于申明一个 function 是异步的，而 await 用于等待一个异步方法执行完成。

await 只能出现在 async 函数中。

如果 await 只能出现在 async 函数中，那这个 async 函数应该怎么调用？

如果需要通过 await 来调用一个 async 函数，那这个调用的外面必须得再包一个 async 函数，进入循环，死循环

如果 async 函数不需要 await 来调用，那 async 到底起个啥作用？

async

async处理它的返回值的

我们当然希望它能直接通过 return 语句返回我们想要的值，但是如果真是这样，似乎就没 await 什么事了。所以，写段代码来试试，看它到底会返回什么：

async function testAsync() {
    return "hello async";
}

const result = testAsync();
console.log(result);

npm install vue-video-player -S3

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

<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, 						// 浏览器准备好时开始回放。
        muted: false, 							// 消除音频
        loop: false, 							// 重新开始。
        preload: 'auto', 						// 立即加载
        language: 'zh-CN',
        aspectRatio: '16:9', 					// 将播放器置于流畅模式，并在计算播放器的动态大小时使用该值。值应该代表一个比例 - 用冒号分隔的两个数字（例如"16:9"或"4:3"）
        fluid: true, 							// 当true时，Video.js player将拥有流体大小。换句话说，它将按比例缩放以适应其容器。
        sources: [{
          type: "",
          src: 'http://sante.weixinbe.com/public/supplier/1527739003138040.mp4'//url地址
          // src: 'http://www.html5videoplayer.net/videos/madagascar3.mp4'//url地址
          // src: "" //url地址
        }],
        poster: "", //你的封面地址
        // width: document.documentElement.clientWidth,
        notSupportedMessage: '此视频暂无法播放，请稍后再试', //允许覆盖Video.js无法播放媒体源时显示的默认信息。
        controlBar: {
          timeDivider: true,
          durationDisplay: true,
          remainingTimeDisplay: false,
          fullscreenToggle: true  //全屏按钮
        }
    }
}
</script>

播放按钮的样式设置

.video-js .vjs-big-play-button{}

视频格式测试：

sources: [
                {
                // type: "video/webm", // ok,用ogg也可打开
                type: "video/ogg", // ok,用webm也可打开
                // type: "video/3gp", //ok
                // type: "video/mp4", // ok
                // type: "video/avi", //打不开
                // type: "video/flv", // 打不开
                // type: "video/mkv", // 打不开
                // type: "video/mov", // 打不开
                // type: "video/mpg", // 打不开
                // type: "video/swf", // 打不开
                // type: "video/ts", // 打不开
                // type: "video/wmv", // 打不开
                // type: "video/vob", // 没转化
                // type: "video/mxf", // 转化出错
                // type: "video/rm", // 转化出错
                src: '/static/video/Video_2018-05-15_105711.webm'//本地测试url地址
                // src: 'http://www.html5videoplayer.net/videos/madagascar3.mp4'//url地址
                }
              ],