页面上展示视频

腾讯视频，土豆视频都是大的视频网站，我们如果也想把自己的视频展示在自己的网页上，该如何做呢？

假如我这里有一个“动物.mp4”的视频，该如何展示在我们的网站上呢？

上面是最基础的需求，当然还要考虑到浏览器兼容性问题。这个问题客户不会给你提出来，但自己需要考虑到。

再说实现：

方法一：我们可以使用HTML5自带的video标签
方法二：找封装好的视频插件，一般封装好的插件本质上还是使用了video标签
方法三：对不支持HTML5的浏览器来说，只能使用Flash了。

Demo http://www.sqber.com/js/videodemo/vue-video-01.html

video标签

页面上展示视频，我们可以使用 HTML5 的 video 标签来展示。

<video controls="controls"
src="https://dl104.yunpan.360.cn/intf.php?method=Download.downloadFile&amp;qid=1474646029&amp;fname=Dragon+Ball+Super+Broly+GB+720P+WEB-DL+AVC+AAC.mp4&amp;fhash=22112e81e2801aa8d9c97536cd512a85c65e486e&amp;dt=104_104.11cb323c8276cfb88aba67ccd8d73b45&amp;v=1.0.1&amp;rtick=15595432955052&amp;open_app_id=0&amp;host=dl104.yunpan.360.cn&amp;devtype=ecs_web&amp;sign=2e57c9cfe66bcd61a65555def3d84719&amp;token=3755382725.8.94a3e72e.1474646029.15158514712400624.1559516542"
>
your browser does not support the video tag
</video>

或者这样

<video  controls="controls">
    <source src="https://dl104.yunpan.360.cn/intf.php?method=Download.downloadFile&qid=1474646029&fname=Dragon+Ball+Super+Broly+GB+720P+WEB-DL+AVC+AAC.mp4&fhash=22112e81e2801aa8d9c97536cd512a85c65e486e&dt=104_104.11cb323c8276cfb88aba67ccd8d73b45&v=1.0.1&rtick=15595432955052&open_app_id=0&host=dl104.yunpan.360.cn&devtype=ecs_web&sign=2e57c9cfe66bcd61a65555def3d84719&token=3755382725.8.94a3e72e.1474646029.15158514712400624.1559516542">
</video>

这是video标签最基本的使用

video标签还可以设置其他属性

vue下的视频插件 vue-video-player

这里在介绍一个vue下的视频插件 vue-video-player，其实是对 video.js 的封装，如果没有使用 vue，而是使用 jquery，直接用 video.js 即可。

这就介绍下vue-video-player的简单使用

js直接引入的形式

1、引入css和js

<link rel="stylesheet" href="lib/custom-theme.css">
        <link rel="stylesheet" href="lib/video-js.css">
        <script src="lib/vue.min.js"></script>
        <script src="lib/video.min.js"></script>
        <script src="lib/vue-video-player.js"></script>
        <script src="lib/zh-CN.js"></script>

2、HTML

<div id='app'>
             <video-player class="vjs-custom-skin" 
                  ref="videoPlayer"
                  :options="playerOptions"
                  :playsinline="true"
                  >
            </video-player>
</div>

3、js

Vue.use(VueVideoPlayer);
        var app = new Vue({
            el:'#app',
            data:{
                playerOptions: {
                    height: '560',
                    autoplay: false, //true-是自动播放
                    muted: false, //false-有声音
                    loop:false,//true-开启循环
                    language: 'zh-CN',
                    playbackRates: [0.7, 1.0, 1.5, 2.0],
                    sources: [{
                        type: "video/mp4", //不指定的话，下面会报错
                        // mp4
                        src:"https://dl104.yunpan.360.cn/intf.php?method=Download.downloadFile&qid=1474646029&fname=Dragon+Ball+Super+Broly+GB+720P+WEB-DL+AVC+AAC.mp4&fhash=22112e81e2801aa8d9c97536cd512a85c65e486e&dt=104_104.11cb323c8276cfb88aba67ccd8d73b45&v=1.0.1&rtick=15595432955052&open_app_id=0&host=dl104.yunpan.360.cn&devtype=ecs_web&sign=2e57c9cfe66bcd61a65555def3d84719&token=3755382725.8.94a3e72e.1474646029.15158514712400624.1559516542"
                        //src: "http://vjs.zencdn.net/v/oceans.mp4", //http://vjs.zencdn.net/v/oceans.mp4 ///video/videotest.mp4
                        // webm
                        // src: "https://cdn.theguardian.tv/webM/2015/07/20/150716YesMen_synd_768k_vp8.webm"
                    }],
                    poster: "https://surmon-china.github.io/vue-quill-editor/static/images/surmon-1.jpg",
                }
            },
            computed:{
                player() {
                    return this.$refs.videoPlayer.player
                }            
            }
        });

包安装形式

用到时，再补充

常见问题

1、展示成中文，汉化

首先在 option 中设置 language 为 zh-CN，同时还有引入对应的js文件，否则汉化无效

2、动态更换视频

更换视频的时候，设置 option 中的 src 即可。
但设置方法需要通过 this.$refs.videoPlayer.player.src(“动物.mp4”) 来设置。如果 $refs.videoPlayer 是null，则是未初始化完成导致的，可以设定一个 setTimeout 来延迟执行即可。

this.$refs.videoPlayer.player() 是播放方法。

3、支持快捷键

https://github.com/surmon-china/vue-video-player/blob/master/examples/02-video.vue

参考

官网 https://surmon-china.github.io/vue-video-player/