hls.js

<template> <div class="video_con"> <video controls class="video" ref="video"></video> </div> </template> <script> 　　 // npm install hls.js -S let Hls = require('hls.js' ); export default { data() { return { hls: null } }, mounted() { this .getStream('url' ) }, methods: { getStream(source) { if (Hls.isSupported()) { this .hls = new Hls(); this .hls.loadSource(source); 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); //

【推荐阅读】微服务还能火多久？>>> 全手打原创，转载请标明出处： https://www.cnblogs.com/dreamsqin/p/12557070.html ，多谢，=。=~ （如果对你有帮助的话请帮我点个赞啦） 目前有一个需求是在移动端上内嵌h5实现点位的视频直播，直播项目采用Vue编写，后端主要输出 RTMP 和 HLS 协议的直播流，本文主要总结一下整体开发的技术选型以及开发过程中的思考与学习总结。 流媒体传输 我的困惑： 什么是流媒体，以及其传输方式是怎样的？ 流媒体 流媒体是指采用流式传输方式在 Internet 上播放的媒体格式，例如音频、视频等多媒体文件。 流式传输方式 流式传输方式是将多媒体文件经过特殊压缩后分成一个个压缩包，再由服务器向客户端连续、实时传送。用户不必像非流式传输那样等待整个文件全部下载完毕后才能播放，而是只需要经过几秒钟或几十秒的启动延时即可对压缩的音视频文件进行播放，剩余的部分将继续下载，直至播放完毕。 流媒体传输协议 常用的流媒体传输协议主要有 HTTP渐进式下载 和 实时流媒体协议 两类。 HTTP渐进式下载 ：仅能传输完整的音视频文件，在给定时刻，用户只能观看已下载的那部分，而不能跳到还未下载的部分。HTTP边下载边播放，严格意义上讲，不是直播协议。他的原理是先下载文件的基本信息，音频视频的时间戳，再下载音视频数据

【推荐】2019 Java 开发者跳槽指南.pdf(吐血整理) >>> DPlayer 是一个支持弹幕的 HTML5 视频播放器。支持 Bilibili 视频和 danmaku，实时视频（HTTP Live Streaming，M3U8格式）以及 FLV 格式。 用法 HTML <div id="player1" class="dplayer"></div> <!-- ... --> <script src="dist/DPlayer.min.js"></script> 选项 var dp = new DPlayer({ element: document.getElementById('player1'), // 可选，player元素 autoplay: false, // 可选，自动播放视频，不支持移动浏览器 theme: '#FADFA3', // 可选，主题颜色，默认: #b7daff loop: true, // 可选，循环播放音乐，默认：true lang: 'zh', // 可选，语言，`zh'用于中文，`en'用于英语，默认：Navigator language screenshot: true, // 可选，启用截图功能，默认值：false，注意：如果设置为 true，视频和视频截图必须启用跨域 hotkey: true, // 可选，绑定热键，包括左右键和空格