easydarwin 下面easywasmplayer和easyplayer

山人在山上

已于 2024-01-26 17:41:16 修改

阅读量860

点赞数 9

文章标签：视频流兼容格式播放前端

于 2024-01-18 15:12:11 首次发布

本文链接：https://blog.csdn.net/dalaijianfen/article/details/135675141

版权

文章讲述了作者在将easywasmplayer用于Vue3项目时遇到的问题，包括在Vue3中缺失依赖、Nginx部署时的WASM文件错误，以及解决方案——更新mime.types和重新编译WASM文件。

摘要由CSDN通过智能技术生成

拷贝大佬们，起码验证能用再写文章，找到的各种坑

@easydarwin/easywasmplayer - npm

区别

easyplayer：在与vue2结合的时候没有问题，但是用在vue3中，就是提示各种缺东西，你就是将所有文件引入到index.html都不行。网上还各种瞎bb，测试了吗？

easywasmplayer：与vue3可以结合

在index.html中引入
<script src="/public/EasyWasmPlayer.js"></script>

<template>
    <div class="box">
        <div id="Player"></div>
    </div>
</template>
<script>

export default {
    data() {
        return {
            player: '',
            url: 'http://playertest.longtailvideo.com/adaptive/bipbop/gear4/prog_index.m3u8'

        }
    },
    mounted() {
        // 实例化播放器
        this.player = new WasmPlayer(null, 'Player', this.callbackfun)
        // 调用播放
        this.player.play(this.url, 0);
        this.player.setSnap("https://img.tuguaishou.com/ips_templ_preview/f0/f9/5a/lg_3599867_1607869606_5fd624a673379.jpg!w1024_w?auth_key=2300366484-0-0-322cbbf653e2e67b5b049a4c3c78070d");
    },
    methods: {
        callbackfun(e) {
            console.log('callbackfun', e);
        }
    }
}
</script>
<style>
.box {
    width: 600px;
    height: 400px;
}
</style>

重点：打包后nginx部署报错