个人中心
文章发布
退出
作者热门文章
- 使用 Spring Initializr 创建 Spring Boot 应用程序
- 在Spring Boot中配置Cassandra
- 在 Spring Boot 上配置 Tomcat 连接池
- 将Camel消息路由到嵌入WildFly的Artemis上
26
4
HLS (HTTP Live Streaming)是Apple公司研发的流媒体传输技术，包括一个m3u8的索引文件、多个ts分片文件和key加密串文件。这项技术主要应用于点播和直播领域。
开源JS库（Github）：
【video.js】https://github.com/videojs/videojs-contrib-hls
【hls.js】https://github.com/video-dev/hls.js/
腾讯视频SDK（TCPlayerLite），文档地址：https://cloud.tencent.com/document/product/881/20207
<!DOCTYPE html>
<html>
<head>
<meta charset=utf-8 />
<title>videojs-contrib-hls embed</title>
<link href="https://unpkg.com/video.js/dist/video-js.css" rel="stylesheet">
<script src="https://unpkg.com/video.js/dist/video.js"></script>
<script src="https://unpkg.com/videojs-contrib-hls/dist/videojs-contrib-hls.js"></script>
</head>
<body>
<h1>Video.js Example Embed</h1>
<video id="my_video_1" class="video-js vjs-default-skin" controls preload="auto" width="640" height="268"
data-setup='{}'>
<source src="http://d2zihajmogu5jn.cloudfront.net/bipbop-advanced/bipbop_16x9_variant.m3u8" type="application/x-mpegURL">
</video>
<script>
</script>
</body>
</html>注：可以指定多个source标签。
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>前端播放m3u8格式视频</title>
<link href="https://vjs.zencdn.net/7.4.1/video-js.css" rel="stylesheet">
<script src='https://vjs.zencdn.net/7.4.1/video.js'></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/videojs-contrib-hls/5.15.0/videojs-contrib-hls.min.js" type="text/javascript"></script>
<!-- videojs-contrib-hls 用于在电脑端播放 如果只需手机播放可以不引入 -->
</head>
<body>
<style>
.video-js .vjs-tech {position: relative !important;}
</style>
<div>
<video id="myVideo" class="video-js vjs-default-skin vjs-big-play-centered" controls preload="auto" data-setup='{}' style='width: 100%;height: auto'>
<source id="source" src="http://1252093142.vod2.myqcloud.com/4704461fvodcq1252093142/48c8a9475285890781000441992/playlist.m3u8" type="application/x-mpegURL"></source>
</video>
</div>
<div class="qiehuan" style="width:100px;height: 100px;background: red;margin:0 auto;line-height: 100px;color:#fff;text-align: center">切换视频</div>
</body>
<script>
// videojs 简单使用
var myVideo = videojs('myVideo', {
bigPlayButton: true,
textTrackDisplay: false,
posterImage: false,
errorDisplay: false,
})
myVideo.play()
var changeVideo = function (vdoSrc) {
if (/\.m3u8$/.test(vdoSrc)) { //判断视频源是否是m3u8的格式
myVideo.src({
src: vdoSrc,
type: 'application/x-mpegURL' //在重新添加视频源的时候需要给新的type的值
})
} else {
myVideo.src(vdoSrc)
}
myVideo.load();
myVideo.play();
}
var src = 'http://1252093142.vod2.myqcloud.com/4704461fvodcq1252093142/f865d8a05285890787810776469/playlist.f3.m3u8';
document.querySelector('.qiehuan').addEventListener('click', function () {
changeVideo(src);
})
</script>第一步: 直接安装 兼容7.0 video.js
npm install vue-video-player videojs-contrib-hls --save第二步: main.js 引入video-js.css
import 'video.js/dist/video-js.css'第三步：组件页面
<template>
<div style="padding-top: 30px; width: 100%; height: 360px; position: relative;">
<video
id="video"
preload="auto"
muted
class="video-js vjs-default-skin"
style="width: 100%; height: 100%; object-fit: fill"
>
<source src="http://ivi.bupt.edu.cn/hls/cctv1hd.m3u8" type="application/x-mpegURL" />
</video>
</div>
</template>
<script>
import videojs from 'video.js'
import 'videojs-contrib-hls'
export default {
mounted () {
this.$nextTick(() => {
this.getVideo()
})
},
methods: {
getVideo () {
videojs('video', {
bigPlayButton: true,
textTrackDisplay: false,
posterImage: false,
errorDisplay: false,
controls: true,
hls: {
withCredentials: true
}
}, function () {
this.play()
})
}
}
}
</script>1、验证m3u8视频地址是否可用的工具
2、主要参考链接：vue组件播放m3u8格式视频
3、其他参考链接：Vue Video.js播放m3u8视频流格式（video+videojs-contrib-hl）
4、video.js官网链接
26
4
0
你能解释一下两者之间的区别吗 和 ? 最佳答案 通过使用 .您可以添加多个源元素。多个源元素可以链接到不同的视频文件。浏览器将使用第一个识别的格式。
我正在使用 ImagePickerController 处理 iPhone 视频捕获。我已经设置了图像选择器 Controller 的属性。我用它来将视频的最大长度设置为 60 秒。 imagePic
我正在制作一个进行基本视频处理的应用程序。我成功地合并到视频(视频上的视频)。 如何将左上角的小视频裁剪成一个圆圈？ 最佳答案 如果您想导出该视频，您需要: 创建 CALayer，它将成为您的视频层的
我正在使用 SVT-AV1 和 FFMPEG 将视频编码为 AV1 视频和 opus 音频编解码器(.webm)，它工作正常，除了视频搜索不起作用(非常糟糕)。当我寻找时，CPU 使用率会上升，并且需
在 Adobe Muse 中使用 VIDEO.JS 目前我已将海报图像配置为在视频开头显示， 当视频结束时，我希望海报图像重新出现。谢谢你的帮助! 最佳答案 将来最好的方法是通过 css。我只是a
我目前正在尝试从单张图片 (1980*1024) 生成视频 这是我的命令: ffmpeg -threads 8 -r 1 -loop 1 -i "C:\Library\Titling\__Resour
我想从 HTML 获取框架 javascript 中的组件，以便我可以处理它们然后输出到 Canvas 最佳答案 看看这个代码笔:Demo var videoId = 'video'; va
我已经使用 video.js 一段时间了，正在寻找响应式解决方案。我看到 4.6 声称是这样，但无法开始工作。我在文档中找不到任何关于使其响应的内容。我基本上只需要它保持在容器的 100% 并保持其纵
我正在寻找任何用于设置视频流服务器的现代资源。最好是开源解决方案。 我对此的搜索导致了很多死胡同。我也确实需要构建自己的服务而不是支付服务费用。 最佳答案 要设置您自己的视频流服务器，您应该从以下组件
如何在处理流媒体或网络视频时拦截“无法播放视频”对话框？ 我尝试了以下操作并能够显示我的自定义错误消息。但最重要的是，我仍然收到 Android MediaPlayer 错误对话框“无法播放视频”。
它使我的视频居中并将控件放置在 div 底部但视频流出。在 css 样式表中，css 似乎无法识别。样式表中的 cos 颜色为黑色。我使用 Chrome 。 div.video_div{ width:
在 HTML5 video 元素中，您定义 type 属性的值始终以 video 开头。从元素是视频不是已经很明显，它是视频类型吗？为什么需要这样的视频:type="video/mp4"，不应该只是t
我想通过 jQuery 或 Javascript 检测 html5 标签内的特定视频何时已完全加载(我的意思是，下载到浏览器的缓存中)。视频具有 preload = "auto"属性。 我尽我所能做到
HTML5 带来或将带来和 标签等等。自从我听说了他们，读了之后更是如此Why do we have an img element?特别是Jay C. Weber's message back fro
我正在制定一个 Web 应用程序的详细信息，该应用程序涉及顺序加载一长串(非常短的)视频剪辑，一个接一个，用户偶尔会输入建立新的视频剪辑加载方向. 我希望能够让浏览器一次预加载五个视频剪辑。然而，我们
我想知道 HTML5 标签现在支持.avi 格式视频文件的播放。 最佳答案 简短回答:否。改用 WebM 或 Ogg。 This article几乎涵盖了您需要了解的有关 的所有信息元素，包括哪些浏
尽管它似乎处于某种危险之中，但开放视频标准是一个好主意。我看到了一些关于运动跟踪的演示——只是概念验证，但仍然很有趣。现在，我要说的是，如果可以访问用户的网络摄像头，像这样的概念真的会是一个收获……想
我正在尝试使用 php-facebook-sdk 并借助 curl Facebook API 创建广告。 我已经使用 curl 上传了我的视频，它返回了一个 ID。现在，该视频 ID 将用于添加广告，
我正在使用 Video.js在我的网站上显示视频的插件。 我想删除画中画图标。我已经尝试了几个小时，但没有成功。 我做错了什么？ 最佳答案 它应该是 data-setup='{"cont
使用 MediaRecorder 从 SurfaceView 录制视频 录音机 recorderProfile = CamcorderProfile.get( CamcorderProfile.QUA
我是一名优秀的程序员,十分优秀！