加强网站建设说明报告范文,字体设计免费版在线立即生成,中国最好的app开发公司,房产网二手房信息网页前端(Html)video播放m3u8(HLS)
HLS (HTTP Live Streaming)是Apple公司研发的流媒体传输技术#xff0c;包括一个m3u8的索引文件、多个ts分片文件和key加密串文件。这项技术主要应用于点播和直播领域。
开源JS库#xff08;Github#xff09;#xff1a;
【video.js】…网页前端(Html)video播放m3u8(HLS)
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/
腾讯视频SDKTCPlayerLite文档地址https://cloud.tencent.com/document/product/881/20207
!DOCTYPE html
html
head
meta charsetutf-8 /
titlevideojs-contrib-hls embed/titlelink hrefhttps://unpkg.com/video.js/dist/video-js.css relstylesheetscript srchttps://unpkg.com/video.js/dist/video.js/scriptscript srchttps://unpkg.com/videojs-contrib-hls/dist/videojs-contrib-hls.js/script/head
bodyh1Video.js Example Embed/h1video idmy_video_1 classvideo-js vjs-default-skin controls preloadauto width640 height268 data-setup{}source srchttp://d2zihajmogu5jn.cloudfront.net/bipbop-advanced/bipbop_16x9_variant.m3u8 typeapplication/x-mpegURL/videoscript/script/body
/html注可以指定多个source标签。
!DOCTYPE html
html langzh-CN
headmeta charsetUTF-8title前端播放m3u8格式视频/titlelink hrefhttps://vjs.zencdn.net/7.4.1/video-js.css relstylesheetscript srchttps://vjs.zencdn.net/7.4.1/video.js/scriptscript srchttps://cdnjs.cloudflare.com/ajax/libs/videojs-contrib-hls/5.15.0/videojs-contrib-hls.min.js typetext/javascript/script!-- videojs-contrib-hls 用于在电脑端播放 如果只需手机播放可以不引入 --
/head
bodystyle.video-js .vjs-tech {position: relative !important;}/styledivvideo idmyVideo classvideo-js vjs-default-skin vjs-big-play-centered controls preloadauto data-setup{} stylewidth: 100%;height: autosource idsource srchttp://1252093142.vod2.myqcloud.com/4704461fvodcq1252093142/48c8a9475285890781000441992/playlist.m3u8 typeapplication/x-mpegURL/source/video/divdiv classqiehuan stylewidth:100px;height: 100px;background: red;margin:0 auto;line-height: 100px;color:#fff;text-align: center切换视频/div
/bodyscript// 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);})
/scriptVue使用video.js播放m3u8
第一步: 直接安装 兼容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第三步组件页面
templatediv stylepadding-top: 30px; width: 100%; height: 360px; position: relative;videoidvideopreloadautomutedclassvideo-js vjs-default-skinstylewidth: 100%; height: 100%; object-fit: fillsource srchttp://ivi.bupt.edu.cn/hls/cctv1hd.m3u8 typeapplication/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视频流格式videovideojs-contrib-hl 4、video.js官网链接
