类似微信视频消息#

需要在播放视频之前展示缩略图，因为app端没有dom，这里需要用到renderjs，通过创建video标签，然后通过canvas绘制图片的方式。传入的url最好是base64格式，因为在浏览器中，由于安全限制，JavaScript无法直接访问本地文件系统路径（如file:///或_doc/…这样的路径），如果是网络格式的url则可以直接传入，下面是完整代码示例。

使用:#

1
<VideoGetPoster :videoUrl="content" @change="changeGetPoster"></VideoGetPoster>

组件内部：#

1
<template>
2
    <view v-if="base64" :src="base64" :change:src="video.setPoster"></view>
3
</template>
4

5
<script>
6
    export default {
7
        name:"video-get-poster",
8
        props: {
9
            videoUrl: {
10
            type: String,
11
            require: true
12
        }
13
    },
14
    data() {
15
        return {
16
            base64: ''
17
        };
18
    },
19
    mounted() {
20
        this.$tools.pathToBase64App(this.videoUrl, (base64) => {
21
            this.base64 = base64
22
        })
23
    },
24
    methods: {
25
        getPoster(poster) {
26
            this.$emit('change', poster)
27
        }
28
    }
29
}
30
</script>
31

32
<script lang="renderjs" module="video">
33
    export default {
34
    methods: {
35
    setPoster(newV, oldV, ownerInstance) {
36
    let video = document.createElement("video");
37
    video.muted = true
38
    // 通过setAttribute给video dom元素添加自动播放的属性，因为视频播放才能获取封面图
39
    video.autoplay = true;
40
    //允许跨域访问
41
    video.crossOrigin = 'anonymous';
42
    // 上面我们只是创建了video标签，视频播放需要内部的source的标签，scr为播放源
43
    video.innerHTML = '<source src=' + newV + ' type="video/mp4">'
44
    // loadeddata 事件在媒体当前播放位置的视频帧（通常是第一帧）加载完成后触发。
45
    video.addEventListener('loadeddata', function() {
46
    let canvas = document.createElement("canvas"),
47
    width = video.videoWidth, //canvas的尺寸和图片一样
48
    height = video.videoHeight;
49
    canvas.width = width;
50
    canvas.height = height;
51
    canvas.getContext("2d").drawImage(video, 0, 0, width, height); //绘制canvas
52
    let poster = canvas.toDataURL('image/jpeg'); //转换为base64
53
    ownerInstance.callMethod('getPoster', poster)
54
});
55
}
56
}
57
}
58
</script>

本地文件路径转base64：#

1
/**
2
 * 文件转成base64字符串
3
 * @param {String} path // 文件地址
4
 * @param {Object} callback  // 返回base64字符串
5
 */
6
export function pathToBase64App(path, callback) {
7
  // 通过URL参数获取目录对象或文件对象
8
   plus.io.resolveLocalFileSystemURL(path, function(entry) {
9
     entry.file(function(file) {
10
       var fileReader = new plus.io.FileReader()
11
       fileReader.onload = function(evt) {
12
         callback(evt.target.result)
13
       }
14
       fileReader.onerror = function(error) {
15
        console.log('failed: ', error);
16
       }
17
       fileReader.readAsDataURL(file)
18
     }, function(error) {
19
       console.log('failed: ', error);
20
     })
21
   }, function(error) {
22
    console.log('failed: ', error);
23
   })
24
}