Java的新项目学成在线笔记-day13(六)

3.4 测试video.js 
参考https://github.com/videojs/videojs-contrib-hls#installation
  http://jsbin.com/vokipos/8/edit?html,output
1、编写测试页面video.html。

[AppleScript] 纯文本查看 复制代码

?

01

02

03

04

05

06

07

08

09

10

11

12

13

14

15

16

17

<!DOCTYPE html> <html lang="en"> <head>  

  <meta http‐equiv="content‐type" content="text/html; charset=utf‐8" />  

  <title>视频播放</title>

    <link href="/plugins/videojs/video‐js.css" rel="stylesheet"> </head> <body> <video id=example‐video width=800 height=600 class="video‐js vjs‐default‐skin vjs‐big‐playcentered" controls poster="http://127.0.0.1:90/video/add.jpg"> 

   <source         

   src="http://video.xuecheng.com/video/hls/lucene.m3u8"    

        type="application/x‐mpegURL"> </video>

 <input type="button" onClick="switchvideo()" value="switch"/>

  <script src="/plugins/videojs/video.js"></script>

 <script src="/plugins/videojs/videojs‐contrib‐hls.js"></script> <script> 

   var player = videojs('example‐video');  

 //player.play(); //切换视频     

    function switchvideo(){    

    player.src({        

    src: 'http://video.xuecheng.com/video/hls/lucene.m3u8',     

       type: 'application/x‐mpegURL',

            withCredentials: true

[AppleScript] 纯文本查看 复制代码

?

1

2

3

4

5

});    

   player.play();

   } </script>

  </body>

</html>


2、测试 配置hosts文件,本教程开发环境使用Window10,修改C:\Windows\System32\drivers\etc\hosts文件
 

[AppleScript] 纯文本查看 复制代码

?

1

127.0.0.1 video.xuecheng.com


猜你喜欢

转载自blog.csdn.net/czbkzmj/article/details/91046017