标签 Vuejs 下的文章

现在的视频格式很多，有传统的、有新颖的，而m3u8格式的视频越来越受欢迎，因为它不占空间，而且播放速度很快。而且现在很多监控播放地址也是m3u8,video标签无法直接在浏览器中播放m3u8格式的视频。这时候我们需要借助video.js来播放。

第一步安装video.js

npm install vue-video-player videojs-contrib-hls --save

第二步在main.js中引入

import 'video.js/dist/video-js.css'

第三步新建视频播放组件

<template>
    <div style="width: 100%; height: 100%">
        <video id="video" preload="auto" muted class="video-js vjs-default-skin" style="width: 100%; object-fit: fill">
            <source :src="video" />
        </video>
    </div>
</template>
<script>
    import videojs from 'video.js'
    import 'videojs-contrib-hls'
    export default {
        props: {
            video: {
                value: null
            }
        },
        mounted() {
            this.$nextTick(() => {
                this.playVideo()
            })
        },
        methods: {
            playVideo() {
                videojs('video', {
                    bigPlayButton: true,
                    textTrackDisplay: false,
                    posterImage: false,
                    errorDisplay: false,
                    controls: true,
                    hls: {
                        withCredentials: true
                    }
                }, function() {
                    this.play()
                })
            }
        }
    }
</script>

第四部引用组件

<Video src="http://ivi.bupt.edu.cn/hls/cctv1hd.m3u8"></Video>

小编今天在使用Vue播放视频的时候，发现视频的格式是flv的，但是video标签是不支持flv格式的，我们只有借助第三方的工具库了。感谢bilibili团队制作的flv.js工具库。
我们首先安装下

npm install --save flv.js

然后我们在组件里面引入

import flvjs from 'flv.js'

我们再在视图里面创建一个id为videoElement的video标签。

<video id="videoElement" controls autoplay muted style="width: 4.5rem; height: 3rem;" />

在mounted中使用flvjs

mounted() {
    if (flvjs.isSupported()) {
        let videoElement = document.getElementById('videoElement');
        let flvPlayer = flvjs.createPlayer({
            type: 'flv',
            isLive: true,
            hasAudio: false,
            url: 'https://XXXXXX.flv'
        });
        console.log(flvPlayer, 'flv对象')
        flvPlayer.attachMediaElement(videoElement);
        flvPlayer.load();
        flvPlayer.play();
    }
},

注意：

  1. flv.js工具库仅支持HTTPFLV协议的流，如果使用RTMP协议的流则依然需要使用flash插件。
  2. 如果没有包含音频流，hasAudio要设置为false。
  3. 如果要自动播放的话，由于浏览器禁用音频的自动播放，所以我们要在video标签上设置muted属性。
  4. 官方文档:https://github.com/bilibili/flv.js

小编今天在使用npm install安装东西的时候出现了这样的错误

gyp: No Xcode or CLT version detected!
gyp ERR! configure error
gyp ERR! stack Error: `gyp` failed with exit code: 1
gyp ERR! stack     at ChildProcess.onCpExit (/usr/local/lib/node_modules/npm/node_modules/node-gyp/lib/configure.js:351:16)
gyp ERR! stack     at ChildProcess.emit (events.js:315:20)
gyp ERR! stack     at Process.ChildProcess._handle.onexit (internal/child_process.js:277:12)
gyp ERR! System Darwin 20.3.0
gyp ERR! command "/usr/local/bin/node" "/usr/local/lib/node_modules/npm/node_modules/node-gyp/bin/node-gyp.js" "rebuild"
gyp ERR! cwd /Users/zero/projects/test/vue_test/big-screen-vue-datav/node_modules/fsevents
gyp ERR! node -v v14.16.0
gyp ERR! node-gyp -v v5.1.0
gyp ERR! not ok

看上面的提示可能是Xcode的问题，那么我们就重装下Xcode的吧，果然解决了问题。

xcode-select --install

做前端的小伙伴应该都很清楚使用vue的v-for就可以很方便的一个数组，然后对数组中的元素就行展示或者操作，那么有没有考虑过遍历对象呢。我们在学习js的时候都应该知道，我们使用js是可以遍历对象的，比如：

var oj = {"a":1, "b": 2, "c": 3}
for(var i in oj){
    console.log(i,"----->" ,oj[i])
}
// 输出
// a -----> 1
// b -----> 2
// c -----> 3

其实使用vue的v-for的效果是一样的，也是用的in。下面案例的输出结果是一样的：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
</head>
<body>
    <div id="app">
        <p v-for="(val, key, index) in list">{{key}}----->{{val}}</p>
    </div>

    <script>
        var obj=
        new Vue({
            el: '#app',
            data:{
                list:{
                    'a':1,
                    'b':2,
                    'c':3
                }
            }
        })
    </script>
</body>
</html>

小编今天在制作视频播放组件的时候，想让视频默认直接就是全屏播放，或者点击之后全屏播放，并不是点击全屏之后再进行全屏，实现方式可能有很多种，小编在这里介绍一种比较简单的，通过官方的VideoContext就可以实现的。
首先我们要引入视频组件：

<video id="myVideo" :src="videoUrl" @click="playvideo" @fullscreenchange="fullscreenchange"></video>

然后设置点击事件

playvideo: function(e){
    this.videoContext = uni.createVideoContext('myVideo', this);
    this.videoContext.requestFullScreen({direction: 0});
    this.videoContext.play()
},

这样就成功实现了全屏播放了，不过我们发现退出全屏后视频还在播放，那么我们就要设置下在退出全屏后，就要停止播放视频了。

fullscreenchange (e){
    if(!e.detail.fullScreen){  
        this.videoContext.pause()
        this.showvideo = false
    }
},

不知道大家平时从哪里获取小图标，矢量图等。小编呢通常是从iconfont上获取图标，大家一搜就出来了。在这之前小编都是下载到本地，保存为png文件使用的，其实还有一种方式，可以在线使用的。下面小编就说下具体的操作步骤：
首先登陆iconfont，使用github以及微博登录都可以。
登录之后找到自己想要的图标，点击添加到购物车（虽然叫购物车，但是是免费的哦）
1.png
然后点击右上交购物车图标，然后会弹出添加到项目，如果没有的话可以新建项目
2.png
新建项目后，可以管理项目
4.png
点击跟多操作修改项目前缀，不能为 el-icon- ，因为这个可能会和Element-UI自带的图标重合
5.png
然后点击Font class，在点击，查看在线链接，然后复制生成的链接就可以了。需要注意的是：每次新增或删除，特别是新增如果要引入新增的图标，要重新生成CSS文件，这时候需要把新生成的CSS文件链接重新在 App.vue 中引入，替换掉原来的链接。
6.png

然后在项目的APP.vue中引入，这时我们就可以通过class="iconfont el-icon-mo-xxx" 的方式在项目中使用引入的第三方图标了。

如果想要去掉 iconfont 这个类直接用 el-icon-mo-xxx 来使用图标的话我们还需要这么使用（链接换成自己的）：

<style>
  @import "//at.alicdn.com/t/font_2209515_4j5tnkfc104.css";

  [class^="el-icon-mo"], [class^=" el-icon-mo"] {
    font-family: "iconfont", serif !important;
    font-size: 16px;
    font-style: normal;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
  }
</style>

在使用vueCli的脚手架工具创建完项目后，然后倒入模块的时候出现了error 'XXX' is defined but never used这样的错误，这是由于我们使用了eslint规范，ESLint 是在 ECMAScript/JavaScript 代码中识别和报告模式匹配的工具，它的目标是保证代码的一致性和避免错误。这就导致了运行时候出现的错误。解决办法：

在package.json文件内加入如下代码：然后保存重启项目。

"rules": {
    "generator-star-spacing": "off",
    "no-tabs":"off",
    "no-unused-vars":"off",
    "no-console":"off",
    "no-irregular-whitespace":"off",
    "no-debugger": "off"
},

Error: Avoided redundant navigation to current location ElementUI导航栏重复点菜单报错的解决办法：
首先打开我们的路由配置文件，ranhu就可以解决了。

import Vue from 'vue';
import Router from 'vue-router';

Vue.use(Router);

// 解决ElementUI导航栏中的vue-router在3.0版本以上重复点菜单报错问题
const originalPush = Router.prototype.push
Router.prototype.push = function push(location) {
  return originalPush.call(this, location).catch(err => err)
}

如果修改了push还是没有生效，那么可以尝试replace方法，例如：

const originalReplace = Router.prototype.replace;
Router.prototype.replace = function replace(location) {
  return originalReplace.call(this, location).catch(err => err);
};

Vue-Cli3.0没有了config文件夹，默认也没有配置文件，这些都是需要我们手动进行建立的，首先我们需要在项目根目录里面建议一个vue.config.js的文件，名字必须是vue.config.js。然后在这个js文件里面进行配置，小编在下面简单介绍几个常用的配置，以及写法：

module.exports={
    baseUrl:'/',//根路径
    outputDir:'dist',//构建输出目录
    assetsDir:'assets',//静态资源目录
    lintOnSave:false,//是否开启eslint保存检测，有效值：true || false || 'error'
    devServer:{
        open:true,//是否自动打开页面
        host:"127.0.0.1",//主机名（真机测试0.0.0.0）
        port:8081,//端口号
        https:false,//是否开启https
        hotOnly: false,//热更新
        proxyL:{
            //配置跨域
            '/api':{
                target:'http://localhost:5000/api',
                ws:true,
                changeOrigin:true,
                pathRewrite:{
                    '^/api':''
                }
            }
        },
        before(app){
            //在服务内部所有中间件之前执行的印个内容
            app.get('/api',(req,res)=>{
                res.json();
            })
        }
    }
}
  1. 1
  2. 2