javascript html5视频播放器

Posted 2023-04-11

需要一个js h5的在线视频播放器
给我文件不要给个链接
或者swf的(但最好要能放h264的)也凑合了

款很棒的 HTML5 视频播放器作为下一代的网页语言，HTML5 拥有很多让人期待已久的新特性，其中之一就是 video 标签，让开发者可以在网页中和添加图片一样简单的方式添加视频。1、VideoJSVideoJS 是最流行的 HTML5 视频播放器，免费、开源，可使用 CSS 轻松定制皮肤，支持全屏，在不支持的浏览器自动切换为 Flash 播放。2、SublimeVideoSublimeVideo 是一个独特的基于云概念的 HTML5 视频播放器，功能强大，可惜不是免费的。3、Open Standard Media (OSM) Player由 Alethia Inc 开发，是集全功能于一体的网络播放器，非常不错。4、Video for EverybodyVideo for Everybody 让你在网页中嵌入一小段代码就能支持 HTML5 视频，在不支持的浏览器中自动切换为 Flash 播放。5、Kaltura HTML5Kaltura 的 HTML5 视频解决方案 – 兼容所有主流浏览器，采用独特的 fallback 机制。6、FlareVideoFlareVideo 由 Alex MacCaw 开发，他是一位Ruby/JS开发者，FlareVideo主要特色：在不支持 HTML5 视频的情况，用Flash作为替代方案可轻松自定义主题支持全屏完全开源和免费用于商业用途7、Projekktor全文 参考技术A 去度娘查一下“我爱播放器”，里面那么多，总有一款适合你，完全免费，直接下载源码，一般我都是用的<video></video>和<audio></audio>；如果你需要实现整合腾讯啊、优酷啊等等直接解析的播放器，那么里面也有，反正就是里面的播放器挺多的，直接下载下来配置到你的网站就行。 参考技术B 要一个js h5的在线视频播放器 参考技术C 搜一下，ckplayer 专用网页播放器 参考技术D 7款很棒的 HTML5 视频播放器
　　作为下一代的网页语言，HTML5 拥有很多让人期待已久的新特性，其中之一就是 video 标签，让开发者可以在网页中和添加图片一样简单的方式添加视频。
1、VideoJS

VideoJS 是最流行的 HTML5 视频播放器，免费、开源，可使用 CSS 轻松定制皮肤，支持全屏，在不支持的浏览器自动切换为 Flash 播放。
2、SublimeVideo

SublimeVideo 是一个独特的基于云概念的 HTML5 视频播放器，功能强大，可惜不是免费的。
3、Open Standard Media (OSM) Player

由 Alethia Inc 开发，是集全功能于一体的网络播放器，非常不错。
4、Video for Everybody

Video for Everybody 让你在网页中嵌入一小段代码就能支持 HTML5 视频，在不支持的浏览器中自动切换为 Flash 播放。
5、Kaltura HTML5

Kaltura 的 HTML5 视频解决方案 – 兼容所有主流浏览器，采用独特的 fallback 机制。
6、FlareVideo

FlareVideo 由 Alex MacCaw 开发，他是一位Ruby/JS开发者，FlareVideo主要特色：
在不支持 HTML5 视频的情况，用Flash作为替代方案
可轻松自定义主题
支持全屏
完全开源和免费用于商业用途
7、Projekktor本回答被提问者和网友采纳

[JavaScript] HTML5 播放hls流媒体视频流

在最新版的 Android webview 中不用任何插件，可以直接播放

在windows10自带的Edge浏览器 可直接播放，PC端 safari浏览器 可直接播放

PC端chrome，IE，Firefox以及集成以上内核的各种浏览器，以及旧版的Android SDK的webview 不能播放

在不能播放的情况下，需要引入hls.js

如下示例：

<template>
  <div class="camera-module">
    <div class="video-view">
      <video ref="video" id="video-rtmp" preload="auto" autoplay="autoplay" muted></video>
    </div>
  </div>
</template>

<script>
  import {getCamera} from ‘../../api/proxyApi‘
  import Hls from ‘hls.js‘
  export default {
    name: ‘CameraModule‘,
    data () {
      return {
        url: ‘‘,
        hls: null
      }
    },
    mounted () {
      getCamera ({
        cameraIndexCode: ‘30615f71e6634fb692eec993aa6c539e‘,
        protocol: ‘hls‘
    　}).then(resp => {
       const data = JSON.parse(resp)
       console.log(‘获取监控点视频流URL：‘, data)
       if (data.code === ‘0‘) {
         this.url = data.data.url
       this.$nextTick(() => {
         this.getStream(this.url)
       })
      }
     })
    },
    methods: {
      getStream (url) {
        if (Hls.isSupported()) {
          this.hls = new Hls();
          this.hls.loadSource(url);
          this.hls.attachMedia(this.$refs.video);

          this.hls.on(Hls.Events.MANIFEST_PARSED, () => {
            console.log("加载成功");
            this.$refs.video.play();
          });
          this.hls.on(Hls.Events.ERROR, (event, data) => {
            // console.log(event, data);
            // 监听出错事件
            console.log("加载失败");
          });
        } else if (this.$refs.video.canPlayType(‘application/vnd.apple.mpegurl‘)) {
          // this.$refs.video.src = ‘https://video-dev.github.io/streams/x36xhzz/x36xhzz.m3u8‘;
          // this.$refs.video.addEventListener(‘loadedmetadata‘,function() {
          //   this.$refs.video.play();
          // });
        }
      },
      videoPause () {
        if (this.hls) {
          this.$refs.video.pause();
          this.hls.destroy();
          this.hls = null;
        }
      }
    }
  }
</script>