vue npm 视频播放 项目中感觉比较好用的包

发布时间 2023-09-26 10:14:30作者: 盘思动

npm @easydarwin/easyplayer

对H265 H264支持都比较友好!!实测比较好用

<!DOCTYPE html>
<html lang="">
  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width,initial-scale=1.0">
    <link rel="icon" href="<%= BASE_URL %>favicon.ico">
    <title><%= htmlWebpackPlugin.options.title %></title>
  </head>
  <body>
    <noscript>
      <strong>We're sorry but <%= htmlWebpackPlugin.options.title %> doesn't work properly without JavaScript enabled. Please enable it to continue.</strong>
    </noscript>
    <div id="app"></div>

    <!-- <script src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js"></script> -->
    <script src="./jquery-1.10.2.js"></script>
    <script src="./EasyPlayer-lib.min.js"></script>

    <!-- built files will be auto injected -->
  </body>
</html>

<template>
  <div class="video">

    <easy-player muted :video-url="url"></easy-player>

  </div>
</template>

<script>
import EasyPlayer from '@easydarwin/easyplayer'
export default {
    name: "VideoPlayer",
    data() {
      return {
        url:'http://playertest.longtailvideo.com/adaptive/bipbop/gear4/prog_index.m3u8'//线上测试
        //url:'http://172.22.192.31:8080/api-ex/xfor_F58F6941D0B7BC4C6866FE8ADA224FF9/32130274001310870694.m3u8'//吾悦264
        //url:'http://172.22.192.32:8080/api-ex/xfor_A5C2FAF77F605F989E1CB6D32F484566/04954075631311000001.m3u8'//企业265
      }
    },
    components:{
      EasyPlayer
    },
    computed:{},
    methods: {}
}
</script>
<style>
.video{
  width:700px;
  height:400px;
}
</style>