如何让LIEBE发盘机自动播放RTSP视频

成都捷德LIEBE发盘机自带的浏览器是基于chromium内核的,是可以支持h5stream 使用的WS 和RTC，其中Android 支持WS 和RTC。发盘机不仅解决了就餐不刷卡或漏刷卡问题，而且为节约粮食添砖加瓦，启用手机订餐功能后就餐前先订餐，就餐只需刷脸验证通过就自动发放餐盘，未订餐不出盘。如有不清楚可联系微信：JD20170409。

先上代码

1. //html

2. <video

3. id="video1"

4. :src="src_mp4"

5. preload="auto"

6. webkit-playsinline

7. playsinline="true"

8.  

9. x-webkit-airplay="allow"

10. x5-video-player-type="h5"

11. x5-video-player-fullscreen="true"

12. x5-video-orientation="portraint"

13. style="object-fit:fill">

14.  

15. </video>

16.  

17. //js

18. var video = document.querySelector('video');

19. videoMethod(video);

20.  

21. function videoMethod(video) {

22. video.addEventListener('touchstart', function () {

23. video.play();

24. });

25. setTimeout(function () { video.play(); }, 1000);

26. document.addEventListener("WeixinJSBridgeReady", function (){

27. video.play();

28. video.pause();

29. }, false);

30. video.addEventListener('ended', function (e) {

31. video.play();

32. })

33. //进入全屏

34. video.addEventListener("x5videoenterfullscreen", function(){

35.  

36. window.onresize = function(){

37. video.style.width = window.innerWidth + "px";

38. video.style.height = window.innerHeight + "px";

39. }

40. })

41. //退出全屏

42. video.addEventListener("x5videoexitfullscreen", function(){

43. window.onresize = function(){

44. video.style.width = 原尺寸;

45. video.style.height = 原尺寸;

46. }

47.  

48. })

49. }

50.  

51. //引用js

52. iphone-inline-video

53.  

54. //css

55. .IIV::-webkit-media-controls-play-button,

56. .IIV::-webkit-media-controls-start-playback-button {

57. opacity: 0;

58. pointer-events: none;

59. width: 5px;

60. }

61. .videobox {

62. width: 4.78rem;

63. height: 7.8rem;

64. position: absolute;

65. top: 3.2rem;

66. left: 1.2rem;

67. }

68. video{

69. width: 4.2rem;

70. height: 7.69rem;

71. position: absolute;

72. left: .22rem;

73. top: .7rem;

74. overflow: hidden;

75. margin-top:-.7rem;

76. }

详细解读

属性

preload="auto"

是否预加载数据

• auto 页面加载后载入整个数据
• meta 页面加载后载入元数据
• none 不载入视频

webkit-playsinline && playsinline="true"

• 小窗播放 使视频不脱离文本流，但是需要webview(allowsInlineMediaPlayback = YES webview.allowsInlineMediaPlayback = YES) ,结果就是苹果支持，安卓不支持。安卓会自动全屏播放。

x-webkit-airplay="allow"

• 字面意思 容许airplay (通过AirPlay可以把当前的视频投放到支持此技术的其他设备上。)

  • 如果是 video 标签，可以通过 x-webkit-airplay="allow" 属性开启；
  • 如果是 embed 标签，可以通过 airplay="allow" 属性开启。