龙行博客

走路看风景,经历看人生,岁月留痕迹,人生留轨迹,17的历史,18的豪情,时间的匆忙,人生的风景,放开心胸往前走,成功再远行,放开理想往前走,梦想再行动。
现在位置:首页 > 编程语言 > web前端 > 播放m3u8|mp4

播放m3u8|mp4

龙行    web前端    2020-6-3    147    0评论    

播放m3u8,mp4

代码demo

<!DOCTYPE html>
<html lang="en">
   <head>
       <meta charset="UTF-8">
       <title>videoJs</title>
       <link rel="stylesheet" type="text/css" href="css/video-js.min.css">
       <script src="js/video.min.js"></script>
       <script src="js/videojs-contrib-hls.js"></script>
   </head>
   <body>
       <section id="videoPlayer">
           <video id="example-video" width="600" height="300" class="video-js vjs-default-skin vjs-big-play-centered" poster="">
               <source src="http://127.0.0.1:2100/20200602/video_20200414_142233/index.m3u8?start=10&end=20" type="application/x-mpegURL" id="target">
           </video>
       </section>
       <script type="text/javascript">
           var player = videojs('example-video', { "poster": "", "controls": "true" }, function() {
               this.on('play', function() {
                   console.log('正在播放');
               });
               //暂停--播放完毕后也会暂停
               this.on('pause', function() {
                   console.log("暂停中")
               });
               // 结束
               this.on('ended', function() {
                   console.log('结束');
               })

           });
       </script>
   </body>
</html>

js,css下载地址:

http://www.jq22.com/jquery-info404

官网地址:

https://videojs.com/advanced/?video=disneys-oceans

网盘保存了一份:

https://pan.baidu.com/s/1yGThOrD4LbGHPShAI-P7Ag

反正活灵活用,多看看文档,比这里全


评论一下 分享本文 赞助站长

赞助站长X

扫码赞助站长
联系站长
龙行博客
  • 版权申明:此文如未标注转载均为本站原创,自由转载请表明出处《龙行博客》。
  • 本文网址:https://www.liaotaoo.cn/362.html
  • 上篇文章:使用代码怎么求和
  • 下篇文章:navicat for mysql 中文破解版(无需激活码)
  • css js
挤眼 亲亲 咆哮 开心 想想 可怜 糗大了 委屈 哈哈 小声点 右哼哼 左哼哼 疑问 坏笑 赚钱啦 悲伤 耍酷 勾引 厉害 握手 耶 嘻嘻 害羞 鼓掌 馋嘴 抓狂 抱抱 围观 威武 给力
提交评论

清空信息
关闭评论
快捷导航
联系博主
在线壁纸
给我留言
四四五五
音乐欣赏
返回顶部